crashprojects
Member
Just as the title says. I desperately need to change the appearance of each individual widget on stage.brazilstation.com. You'll see the sidebars replete with widgets and I need to change each one.
I've searched to no end and have gotten some answers but no helpful ones. If anyone can help me with this I'll be eternally grateful. I really have no idea what I'm doing. Thanks for reading.
sowingseeds
Member
You will need to enter into your child theme stylesheet the necessary code, and to discover the code the easiest way is either with firebug in Firefox or Developer Tools in Chrome. For example your 'Upcoming Classes' li has an id of my_calendar_upcoming_widget-3 and a class of widget_my_calendar_upcoming _widget. On each widget you can target the specific ul/li for that.
crashprojects
Member
What code? Where does it go? This is what I mean when I say "I really have no idea what I'm doing."
What do I enter and where do I enter it?
sowingseeds
Member
The code goes in your stylesheet that is in your child theme. You have a folder brazilstation in your theme folder... wp-content/themes/brazilstation. At this point of time you have added nothing to the style sheet - the file called style.css.
You add the code to this file. Using firebug - if you are using firefox; or chrome developer if google chrome etc., you will then be able to see what code to add to change the look. (My guess is if you rely on http://www.w3schools.com/css/default.asp to help you see what code will change what.)
Take an example: 'Learn More' change the color of the text to red would be li#text-10 h3.widgettitle {color:red;}
The text in that section is within a paragraph style so you would change it with:
li#text-10 p {code here}. And in that section because you are using links you will need to add the letter 'a' after the p - this means you are targetting the link in the paragraph, so li#text-10 p a {text-underline:none;} (for example).
All the code goes in the style.css in your folder brazilstation.
Can't do too much damage as you experiment. But you really need to work in Firefox, Chrome or equivalent where you can see what needs to be coded.
crashprojects
Member
Thank you so much for this. I really appreciate your help.
My style.css file doesn't have any code in it, just links to other style sheets. I'm going to guess and say that one I have to change/add code to is either "default?"
sowingseeds
Member
No best to make all changes in the stylesheet in your folder. The one that has nothing in as you say. The reason for changing this is when a new thematic theme is released you do not lose your changes. The child theme overrides what is in default
crashprojects
Member
Right but there is no stylesheet in my folder, is what I'm saying. There is simply one that is called style.css and it contains no code. IT looks like this: Thematic is © Ian Stewart http://themeshaper.com/
.
*/
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-fixed.css');
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');
/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');
/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');
You're saying I should just add code to the above?
sowingseeds
Member
Yes that's the one. You should not make changes to default.css. Add all changes after the code that is already there.
crashprojects
Member
Thanks so much for all of this. This information cobbled together with some other things I read were really helpful. Just fyi though, adding the code you suggested to style.css didn't work, it did have to be added to default. In any event it was your code and it helped me immensely so thank you!
taylormade
Member
I followed a tutorial and copied the default.css file then renamed it, newstyle.css and then changed the link in the style.css:
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');
/* Apply default theme styles and colors */
/* This is a copy of the default.css file */
@import url('../childthemename/newstyle.css');
/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');
This topic has been closed to new replies.