- This topic has 9 replies, 3 voices, and was last updated 9 years, 11 months ago by
.
-
Posts
-
Hello. The site I am building is not live to the public; therefore, I cannot post a link. I am including three text widgets within the home top widget area. Within each text widget I have content comprised of a header and text. I would like to center the content (the headers and the text within each text widget) that is within the home top widget area. I tried adding css similar to what I used to center the content within the sidebar, but this did not work for the home top widget area. Can anyone tell me how to achieve this? In addition, I would like to style the content in this area as well (change font color, size, etc.)
Thanks for your help!Without seeing the code, we can't really be specific. In general, you want to find the least-specific CSS selector that will accomplish what you need. I can't tell you what that would be for your specific site though, sorry.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
I was perfectly specific about exactly what I want to achieve. There is nothing site specific about my question other than the child theme Im using (executive pro). If you do not know how to center content within a text widget in the home top widget area, then I guess your not an experienced developer. Going forward, I'd appreciate if you stop reply to my posts saying that you can't help without the site. Thats means you can't help me, end of story, no need to reply. Thanks 🙂
Sure, good luck!
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
Oh, btw, you could probably just use inline styles inside your widget areas. I wouldn't recommend it, of course.
So, you'd insert something like this into your widget area:
<h2 style="font-size: 30px; color: red; text-align: center;">Header</h2><p style="font-size: 16px; color: blue; text-align: center;">Test</p>
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
I don't consider myself a professional developer by any means, but Im experienced enough to know that is not the correct way. Of course I know how to do it the wrong way. But I was inquiring here to find the CORRECT way. Thanks again!
Well, like I suggested in my original post, "In general, you want to find the least-specific CSS selector that will accomplish what you need." I would use a browser inspector to find this.
Without seeing your site, there's honestly nothing more anyone could do for you -- you didn't even provide what theme you were using, so we're just donating our free time to help point you in a maybe-helpful direction, which is sort of like grasping at straws.
I'd recommend being more specific in your original posts, and you'll probably get better responses to what you're trying to ask. It might also help you get some responses to your previous, unanswered questions.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
In your style.css
div.home-top.widget-area {text-align: center;}The advice from Lauren is correct and accurate.
Step 1. find the selector that is appropriate, the best way to see this is with browser development tools that allow you to inspect elements. In Chrome it is build in (right click), with FireFox you need the Firebug add-in, in IE it is Developer Tools (F12)
in this case div.home-top.widget-area
Step2. apply the appropriate css
probably the best place to find that out if your are not a developer is here http://www.w3schools.com/cssref/default.asp
My techy blog WordPress and stuff badlywired.com
Lauren's incorrect advice is as follows: "Oh, btw, you could probably just use inline styles inside your widget areas. I wouldn’t recommend it, of course. So, you’d insert something like this into your widget area <h2 style="font-size: 30px; color: red; text-align: center;">Header</h2><p style="font-size: 16px; color: blue; text-align: center;">Test</p>".
Thats not correct. It will produce errors. Your not supposed to style text within the html, your supposed to use css; you know that; right? Or did you just want to stick up for Lauren? lol.. Regardless, I figured it out a while ago..no need to keep the posts coming. Thanks for the help!
Inline styling has its place in web design, especially where small inlined css can improve performance, and in dynamic site elements where javascript dynamically changes styles, such as sliders. Also inline styles are 100% necessary in html email as css is not interpreted.
But if course your probably knew that and were just joking.
My techy blog WordPress and stuff badlywired.com
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.