On my wordpress powered website I have widget title boxes if you have a look you will see I have a one titled 'british lions' in the left sidebar on the right hand side of the website.
This is a category widget and will only show posts from that category. I would like to change the title box from green to red to match the 'british lions' style.
I will then add more of these widgets but they will be pulling from different categories and will also have their own color style. You will see what i mean on the main content on the front page aviva is yellow super rugby is blue etc etc but i want this for the widgets aswell.
How do i target the specific widget boxes with css to change the background. I have tried with firebug but it seems to change all the widget title boxes and not that specific one i am after.
http://www.rugbyclubhouse.net
Hopefully someone can help and i am making sense.
Thanks
you can access it by its id #feacpost_featuredcategorypostswidget-2.
so you could add something like
#feacpost_featuredcategorypostswidget-2 h3 {
background-color: #b22023;
}
to your CSS.
It is possible.
Let us take the 'British Lions' tab here for instance.
#feacpost_featuredcategorypostswidget-2 h3 {
background-color: #ff0000 !important;
}
Take this css and put it inside your own stylesheet.
I hope this helps.
Related
I've been trying to figure this out all day but have reached my code knowledge limit as I try to change the child theme to achieve this.
Here's an image showing what my site currently displays, next to an image of the desired result.
What I have VS What I want
I've tried using a few snippets of code I've found on the Stack Exchange that remove Woocommerce descriptions but with no luck. I'd like to remove the gap, the description title, but must keep the description box itself because that's what allows the tabs at the bottom of the page.
Here's a link to the page itself, I can find and isolate the gap and fix it using the html, but I've no idea how that relates to the CSS (I'm new to this) Link : https://folduptoys.com/product/space-garden-playset/
Here's how it's currently set up, I'm using the Salient theme, with the 'Product Tab Position' set to 'Fullwidth Under Images'.
Any help would be really appreciated. Thank you x
-Alex
Here's what will work but it's important to note that if other tabs show up, like 'Attributes' or 'Dimensions' that they'll be visible, but the `Description' tab won't be. So you'll have to consider whether you want it to work that way or not.
There's two things going on, first, the margins on the tab menu were big. 70px on top and 50px on the bottom. Seems too large in my opinion but I long ago gave up guessing on why Salient's devs do anything.
The second thing is to hide the 'Description' tab. If other tabs end up being present though, they'll show up in it's place.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
margin:0 auto;
}
#tab-title-description{
display:none;
}
If what you want is to entirely remove the tabs navigation, meaning that if other tabs are there, no one will be able to see/access them, so not a good idea unless you're also modifying the tab content layout so that they all display, then use this to hid that whole bar.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
display:none;
}
I have 6 item in my header menu but I want to make one of them red. How can I do that? Please explain more detailed because I am a lawyer....
Go into Appearance > Menu and select the menu you're after.
Under 'Screen options' on top, check the box to show attributes.
Find your menu item and click it. You'll see the ability to add a class name. Remember what you added.
Under theme options (in the left menu) choose 'global css' and add your styling there.
.class-name { background- color: red;}
There is something really strange happening with the menu on the child theme "Education" of the Genesis framework. This framework has two navigation positions: primary and secondary. As you can see here both appear one under the other in the red area. However, there is a third position that seems to be hardcoded in the child theme (?) and won't go away even if I don't assign a position to the menu.
Can you guys give me an idea what is going on? I'm not very good at this stuff. I tried looking into the child theme's code, but found nothing referencing this...
Ultumately what I want to do is use the top position (the one in the white area), but I can't, because I need to make the site multilingual, but that top position doesn't appear in the menu options, so I can't assign different menus for the different languages.
The white area at the top right is a widget area. The site already has two widgets in that Header Right widget area - a text widget (with the phone number), and a nav menu widget (the three locales).
You could make it two nav menu widgets. See Appearance -> Widgets, or use the Customizer. Alternatively, you could adjust the CSS, so that the red / grey locale 'tabs' become different looking links with a white background.
Also useful, if you do just need a single menu location there, would be the Genesis Header Nav plugin.
I have read the answers to the other [very] related questions, but I thought I would pose it again since polymer updates might have been made.
I can change all the colors in [dart] paper-scaffold (core-scaffold) - the menu and toolbar, but I cannot change the color of the header across the top. It is always background-color=#526E9C. The only way I can do it is change the core-toolbar style in the generated (using pub build) index.html. And this one line change sets the color across the whole header across the browser window (which is what I want). So I can get by.
When I do style:
core-toolbar{
background-color: #7A418D;
color: #FFF;
}
it only changes the color above the drawer, and not across the whole top. It's very mysterious why it just does that bit!
I have tried shadow-shim, core-scaffold::shadowdom.. etc. I have tried changing the /src/ core-scaffold.html - and more, where this pervasive value #526E9C appears.
In my website (sekpa.org) it shows this blue (#526E9C) half.
Is it just a bug? If it is, I'd be very happy in that knowledge!
Thanks Steve
There are two core-header-panels inside a paper-scaffold.
Each core-header-panel contains one core-toolbar.
The left collapsible core-header-panel as well as its inner core-toolbar are sitting in the normal Light DOM, and that's why you can change its color by specifying the css like that.
However, the right core-header-panel and core-toolbar are inside paper-scaffold's Shadow DOM. In order to change the color of this core-toolbar, you need to do something like -
paper-scaffold::shadow core-toolbar {
background: #7A418D;
color: #fff;
}
For more info, please refer to this link.
I'm developping a Wordpress website for a painter, and I'd like to use paintings as backgrounds for menu elements, just like on this picture :
http://img829.imageshack.us/img829/7364/capturedcran20120509094.png
The active page has colors, the inactive ones are in black and white, and become colored on mouse over.
I'm using a premium WP theme to have a similar menu, but I don't know how to achieve this menu. (this is a dropdown menu, if there is a submenu, everything below it drops down as it appears, but there is no spacial background on the submenu).
Do you know how to achieve that, please ?
There is no any type of option in WP menu but you can do it by assign class for each menu from WP menu section and providing custom CSS
Like
And CSS with bg image
.dashboard a {
background: url(../../images/navicons/81.png) no-repeat;
}
Just use the ID of the items and apply a background with CSS. Then add a Greyscale script: http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/ You can also apply a CSS fall-back if necessary (not with grey scale, but with opacity).