widget area background color
-
Sorry for last response that was coming in just as you replied. I think your latest version may have done it. One *little* thing. The page title on the home page (Connor Wood Bicycles) just beneath the slider is left aligned when it used to be centered.
I *really* appreciate your going above and beyond on working through this with me.
-
Hey, no worries!
Replacing the code with this should center it:
#page-header .entry-title { background-color: rgba(0,0,0,.55); padding: 5px 20px; display: inline-block; text-align: center; } .home #page-header .entry-title { background-color: transparent; } header.entry-header { text-align: center; }Let me know if that doesn’t work,
Sage -
Perfect! I can’t find any other funky stuff so I think you nailed it. Just as an aside, would there be a way to accomplish something similar with a drop shadow or dark stroke around the font?
Also, how do you think it looks overall? I’m still working through the organization of content on the specific bike pages but it’s getting closer.
-
Great to hear!
To do a text shadow you would change the code to something like this:
#page-header .entry-title { text-shadow: 0px 0px 8px #000; padding: 5px 20px; display: inline-block; text-align: center; } .home #page-header .entry-title { text-shadow: none; } header.entry-header { text-align: center; }Yeah, looking good! Your bikes are definitely drool-worthy haha.
Sage
-
Oh, you saw that FB post? Thanks!
So I feel sheepish now. The drop shadow looks *way* better, I think and stands out against lighter backgrounds almost as well. What do you think? Can it be applied to the home page easily as well? I want to be consistent.
-
Haha, not sure which FB post you’re referring to, I was just looking at the pics of the bikes on the site ^_^
To change it for the homepage you would need to add this code in underneath the other code I’ve given you (not replacing it)
.home .fc-contain .entry-title a { background-color: transparent !important; text-shadow: 0px 0px 8px #000; }Hope that helps,
Sage -
That did it. Any way to darken the shadow?
Oh, I had a recent post on FB where my bikes were titled “drool-worthy” by a magazine. Thought you might have read that since it’s not an expression you otherwise hear regularly.
-
Great to hear! That’s as dark as it can get…you can bring the shadow in closer by changing the 8px number in the text-shadow line to something like 1px or 2px?
Haha, definitely didn’t see that post, I just have a habit of using weird expressions :)
Sage
-
This is great. I like this look much better and with bringing the shadow down to 4px it looks pretty nice. What do you think?
Always in favor of weird expressions!
c
-
That’s great!
If it were me, I’d probably change the colour, font weight, and set it to uppercase so that it matches your logo and possibly makes it a bit easier to read?
Something like this:
#page-header .entry-title { text-shadow: 0px 0px 8px #000; padding: 5px 20px; display: inline-block; text-align: center; text-transform: uppercase; font-weight: 900 !important; color: #FFF !important; } .home #page-header .entry-title { text-shadow: none; } header.entry-header { text-align: center; } .home .fc-contain .entry-title a { background-color: transparent !important; text-shadow: 0px 0px 8px #000; text-transform: uppercase; font-weight: 900 !important; color: #FFF !important; }Hope that helps :)
Sage -
Let me try it and see. How much of what you gave me does this replace? I see you’ve got shadows in here and don’t want to mess up what we’ve got.
-
Yeah, this would replace all the previous code (you might just need to edit the numbers for the shadow size again though, I forgot to put in that change)
Make sure to keep a copy of the current code so you can easily place it back in if this doesn’t work.
Thanks,
Sage -
Yes, that’s way more readable. One nit though. Again, below the featured image area on the home page for the title the color of Connor Wood Bicycles changed to white and doesn’t show on the white background.
-
Ah, sorry about that!
Change out the current “.home #page-header .entry-title” block to match this should do it:
.home #page-header .entry-title { text-shadow: none; font-weight: 500 !important; color: #000 !important; }Hope that helps,
Sage -
There we go! One other thing I overlooked. The post titles didn’t change or post pages
Finally, in that featured post area on the home page can I remove the date and the little icon for the post type?
Is this OK asking for this much help?
-
Not a problem!
Add this underneath the rest of your code:
.single #single-header .entry-title { text-shadow: 0 0 8px #000; padding: 5px 20px; display: inline-block; text-align: center; text-transform: uppercase; font-weight: 900 !important; color: #FFF !important; } .home #front-page-blog .entry-meta { display: none; }Generally if you have different tasks it’s best to create different threads for each, but I don’t mind helping sort out these little things while the bigger fix is getting solved :)
Sage -
Fantastic! I think we’ve nailed this and it looks great. I’ll start a new thread when I have something else. Thank you!
-
- The topic ‘widget area background color’ is closed to new replies.
WordPress.com Forums 