Converting CSS from an old theme to a new one
-
Oops, hit submit before I was finished. Here is the other code.
.content-sidebar.widget-area .widget .widget-title { color: #FFFFFF; padding-left: 10px; } -
Ah, thank you! I actually tried adding something about the center but I must have written it wrong because it didn’t work…so I just noticed that my left side bar widgets not only don’t have the white writing like the right sidebar, and they aren’t centered…what am I missing for that?
-
Ah, didn’t notice that. This centers the titles on the left sidebar.
.primary-sidebar .widget-title { text-align: center; font-size: 13px; }The titles on the left sidebar are a little small and hard to read, so I added a font-size declaration as well, which you can adjust as desired, or remove it if you are happy with the current font size.
-
Ok, so now the titles are white…weird! I tried playing around with changing the text size but nothing changed when I changed the 13 to another number. I like the size now, but want to make sure if I want to change it in the future that I have it right.
So, am I supposed to make new threads for my other questions? Never got confirmation on that…(see what was said above by design simply). If not, here is my next question:
I have the colors changed for my post titles, categories above the title, and want also to change the info below (date, comment count, etc.) but the CSS I have won’t change that part. I does work for the titles and category labels though. Here is what I have, I want the post titles 059E9B and the other two 8BA14E:
h1.entry-title a {
color: #059E9B;
}div.entry-meta {
color: #8BA14E;
}span.cat-links a {
color: #8BA14E;
} -
Whoops, my bad on the selector. Change it to this:
.primary-sidebar .widget .widget-title -
For the date, comment etc., those are links, so let’s change this
div.entry-metato the following:
.entry-date a, .comments-link a, .edit-link a -
Ah, that makes sense. Thanks! Both worked fabulously. It’s amazing what just one little change will do.
OK, so now I have CSS to change the color of the tags under each post except that the tip is still grey…also it doesn’t work on the iPhone version, just see grey there. I changed the text color to white too, did I do that right and how do I fix the tips and iPhone version? Here is what I have:
.entry-meta span.tag-links a {
background-color: #8BA14E;
color: #fff;
} -
That left end is a bit of slick CSS trickery. Add the following to turn it green like the rest of the background.
.entry-meta .tag-links a:before { border-right: 8px solid #8BA14E; }If you wish to play around with things to see how that was done, look at the original CSS for .entry-meta .tag-links a:before.
-
Fabulous! Thank you! Here is my next question:
So I have CSS to change the text size in my menu and another thread told me that now that I did that it affects the way the menu looks on some devices, I guess it drops it down. With this I also had added CSS to change the color of the menu box, so if I leave the menu box grey does the text size change still make the menu drop down like they said? I never saw this problem so I want to make sure it’s ok. I had this CSS for the size and I originally had it set at 17 but changed to 16 to see if that helped the problem:
.nav-menu {
font-size: 16px;
} -
The font size isn’t causing an issue, but it appears like a color change is, for some reason. Go back to Appearance > Customize > Colors and temporarily change accent color one from the light grey you have to a darker color, such as a dark blue and see if the menu issue (white text on a light grey background) goes away.
-
My accent color 1 is white…not light grey. And my menu is black writing on a light grey background. The light grey menu box was a default…
-
-
Oh and I see that there are orange stripes on the top of the widget title boxes on the right column.
-
Twenty Fourteen is a complex theme. Add the following to the end of your existing Custom CSS and then go back to Appearance > Customize > Colors and set your accent one color back to the light grey you had and see what happens. If all goes well, the background of the minified menu should go to the turquoise you are using in other places.
.site-navigation li, .primary-navigation .nav-menu, .secondary-navigation, .secondary-navigation li { background: #059E9B !important; } -
Ok, did it. And the small section of menu to the left on the menu bar is now a light grey. My background around the edges of my page went back to white (which from what I was told is controlled by custom color 1 that I put back to white). But my menu bar is my turquoise color. I want to to be back to the default grey it was before…
-
Sigh! Twenty Fourteen is a challenge. Replace what I had give above with this, which at least gets text readable.
@media screen and (max-width: 782px) { .primary-navigation a { color: #262626 !important; } }I’m going to have to sign off for the night, but will work on this again tomorrow for you.
-
Ok, now the menu bar is that original default light grey again…are you still seeing a problem like there was before??
No worries! Get some sleep and let me know what the issue is tomorrow. Thanks for your help!
-
Ok, fresh start and let’s replace what I had given above with the following:
@media screen and (max-width: 782px){ .primary-navigation a{ color:#262626 !important; padding-left: 5px; } .site-navigation .current_page_item > a { background-color: #059E9B; color: #FFFFFF !important; } .site-navigation .nav-menu li > a:hover { background-color: #059E9B !important; color: #FFFFFF !important; } } .menu-toggle:before { color: #FFFFFF !important; }It give the turquoise color on hover on the minimized menu and turns the text white on hover, just like on the full menu. Let me know what you think.
-
I just tried it and it seems that all is good on my desktop. I looked at my iPhone and it looks fine too…but I don’t have another device to check it out. How does it look on your end?
- The topic ‘Converting CSS from an old theme to a new one’ is closed to new replies.
WordPress.com Forums 