Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
gyatmnucla
7,618 PointsHow to override theme Wordpress
Hi all, The wordpress theme i am using, uses a lot of !important. What can I do to override these... I can't modify the theme :(
11 Answers
gyatmnucla
7,618 PointsArghhhhh cant override it !! They have so weird selectors :
header#top nav ul li a:hover, header#top nav .sf-menu li.sfHover > a, header#top nav .sf-menu li.current-menu-item > a, header#top nav .sf-menu li.current_page_item > a .sf-sub-indicator i, header#top nav .sf-menu li.current_page_ancestor > a .sf-sub-indicator i, header#top nav ul li a:hover, header#top nav .sf-menu li.sfHover > a, header#top nav .sf-menu li.current_page_ancestor > a, header#top nav .sf-menu li.current-menu-ancestor > a, header#top nav .sf-menu li.current_page_item > a, body header#top nav .sf-menu li.current_page_item > a .sf-sub-indicator [class^="icon-"], header#top nav .sf-menu li.current_page_ancestor > a .sf-sub-indicator [class^="icon-"], header#top nav .sf-menu li.current-menu-ancestor > a, header#top nav .sf-menu li.current_page_item > a, .sf-menu li ul li.sfHover > a .sf-sub-indicator [class^="icon-"], ul.sf-menu > li > a:hover > .sf-sub-indicator i, ul.sf-menu > li > a:active > .sf-sub-indicator i, ul.sf-menu > li.sfHover > a > .sf-sub-indicator i, .sf-menu ul li.current_page_item > a, .sf-menu ul li.current-menu-ancestor > a, .sf-menu ul li.current_page_ancestor > a, .sf-menu ul a:focus, .sf-menu ul a:hover, .sf-menu ul a:active, .sf-menu ul li:hover > a, .sf-menu ul li.sfHover > a, .sf-menu li ul li a:hover, .sf-menu li ul li.sfHover > a, #footer-outer a:hover, .recent-posts .post-header a:hover, article.post .post-header a:hover, article.result a:hover, article.post .post-header h2 a, .single article.post .post-meta a:hover, .comment-list .comment-meta a:hover, label span, .wpcf7-form p span, .icon-3x[class^="icon-"], .icon-3x[class*=" icon-"], .icon-tiny[class^="icon-"], body .circle-border, article.result .title a, .home .blog-recent .col .post-header a:hover, .home .blog-recent .col .post-header h3 a, #single-below-header a:hover, header#top #logo:hover, .sf-menu > li.current_page_ancestor > a > .sf-sub-indicator [class^="icon-"], .sf-menu > li.current-menu-ancestor > a > .sf-sub-indicator [class^="icon-"], body #mobile-menu li.open > a [class^="icon-"], .pricing-column h3, .pricing-table[data-style="flat-alternative"] .pricing-column.accent-color h4, .pricing-table[data-style="flat-alternative"] .pricing-column.accent-color .interval, .comment-author a:hover, .project-attrs li i, #footer-outer #copyright li a i:hover, .col:hover > [class^="icon-"].icon-3x.accent-color.alt-style.hovered, .col:hover > [class*=" icon-"].icon-3x.accent-color.alt-style.hovered, #header-outer .widget_shopping_cart .cart_list a, .woocommerce .star-rating, .woocommerce-page table.cart a.remove, .woocommerce form .form-row .required, .woocommerce-page form .form-row .required, body #header-secondary-outer #social a:hover i, .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .nectar-milestone .number.accent-color, header#top nav > ul > li.megamenu > ul > li > a:hover, header#top nav > ul > li.megamenu > ul > li.sfHover > a, body #portfolio-nav a:hover i, span.accent-color, .nectar-love:hover i, .nectar-love.loved i, .portfolio-items .nectar-love:hover i, .portfolio-items .nectar-love.loved i, body .hovered .nectar-love i, header#top nav ul #search-btn a:hover span, header#top nav ul .slide-out-widget-area-toggle a:hover span, #search-outer #search #close a span:hover, .carousel-wrap[data-full-width="true"] .carousel-heading a:hover i, #search-outer .ui-widget-content li:hover a .title, #search-outer .ui-widget-content .ui-state-hover .title, #search-outer .ui-widget-content .ui-state-focus .title, .portfolio-filters-inline .container ul li a.active, body [class^="icon-"].icon-default-style, .svg-icon-holder[data-color="accent-color"], .team-member a.accent-color:hover, .ascend .comment-list .reply a, .wpcf7-form .wpcf7-not-valid-tip, .text_on_hover.product .add_to_cart_button, .blog-recent[data-style="minimal"] .col > span, .blog-recent[data-style="title_only"] .col:hover .post-header .title, .single #single-meta ul li:not(.meta-share-count):hover i, .single #single-meta ul li:not(.meta-share-count):hover a, .single #single-meta ul li:not(.meta-share-count):hover span, .single #single-meta ul li.meta-share-count .nectar-social a:hover i, #project-meta #single-meta ul li > a, #project-meta ul li.meta-share-count .nectar-social a:hover i, #project-meta ul li:not(.meta-share-count):hover i, #project-meta ul li:not(.meta-share-count):hover span {
color: #27CCC0!important;
}
like this, and when i do my
.current_page_item li a {
color: white!important;
opacity: 1!important;
}
it doesn't override it...
Luke Pettway
16,593 PointsIf you can't modify the theme itself, can you ad least define a new stylesheet elsewhere, as long as it comes after the theme's the cascading nature of CSS will allow anything you define after to override it. You'll still need to use !important but at least you can work with it?
What theme is it by the way? Using lots of !Important is extremely bad engineering.
gyatmnucla
7,618 PointsThe theme is this one : http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266 I though it was a good one :O
Luke Pettway
16,593 PointsI'm not saying it is a bad theme, it serves its function, but as far as extending it, the practice of using !important that much is typically not good. Does the theme have any build in customization capabilities, I've see that before, there is usually a custom menu to tweak things.
gyatmnucla
7,618 PointsThere's some things you can tweak in the menus but there are things you can't :)
Luke Pettway
16,593 PointsDo you have the ability to FTP in and add a second css stylesheet? That is probably your best and easiest option.
gyatmnucla
7,618 PointsI created the stylesheet, but i dont really know where to link it ..
Luke Pettway
16,593 PointsYou'll probably want to child-theme this to be honest, that way you don't have to worry about updating the theme
https://codex.wordpress.org/Child_Themes
It's pretty straight forward, just follow the guide, and then it will show you where to link your secondary stylesheet to make your changes.
gyatmnucla
7,618 PointsAlright, so i created the child theme folder, added the css :
/*
Theme Name: Salient
Theme URI: http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266
Description: Salient Child Theme
Author: Name
Author URI: http://example.com
Template: salient
Version: 6.1.72
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: salient-child
*/
and the php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
what do i need to do to make it functional on the site ?
gyatmnucla
7,618 Pointsactually, i did it now let me check if i can change what i couldnt earlier
Luke Pettway
16,593 PointsSwitch the theme over to the child theme, and it should still work as normal but now you have access to your child theme which should let you override the defaults.
gyatmnucla
7,618 PointsI saw the selectors they use from inspect element. And my css was put into the style.css of the child theme.. I checked with a basic test and the css file affects the site, but still cant override.. Should i try to find what i want to change in the theme's files ? ...
Luke Pettway
16,593 PointsIf you can find the line in the parent theme, just copy that code, add it to your child styles, and then change it to what you want. The point behind having a child theme is that you can change it however you want without worry of an update wiping it all out.
You could use the full stylesheet from the parent in the child theme, and just directly change it too.
Luke Pettway
16,593 PointsIf you can find the line in the parent theme, just copy that code, add it to your child styles, and then change it to what you want. The point behind having a child theme is that you can change it however you want without worry of an update wiping it all out.
You could use the full stylesheet from the parent in the child theme, and just directly change it too.
gyatmnucla
7,618 PointsThe thing is, that before the child theme, i would add my css with the built-in theme css addition option. But now, with the childs theme css stylesheet, it doesnt really change something, what i couldnt override with the built-in option can still not be overridden
gyatmnucla
7,618 PointsOkay, so i found it in the theme's files. How bad is it, to add my styles right after theirs in their file ?
Luke Pettway
16,593 PointsWell the issue is that if you ever update the theme itself, it will override any changes you make. If you copy the selector you want to change over to your child theme style it should override it.
gyatmnucla
7,618 PointsWell, if i copy the exact same thing to the child it doesnt work, but when i add it in the theme's files it work. Weird. It seems like the child has lower priority
Luke Pettway
16,593 PointsLuke Pettway
16,593 PointsDid you load this in the child theme? If this file is in your child theme you can actually just modify it directly, that way it doesn't matter if the parent gets updated, the child always takes precedence over the parent theme.