Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] custom css style selectors


  #1  
Old Jan 6, 2012, 02:24 PM
LilyBurbank
 
8 posts · Aug 2010
Question: How can I get the following styling code out of the html and into the CSS Inserts? It doesn't seem to work with the usual "#custom_div_name."

Site: www.socalpianoacademy.com/dev

HTML code on home page:
<div style="background: url('http://socalpianoacademy.com/dev/wp-content/uploads/2012/01/mission_doily.gif') no-repeat; display: block; width: 305px; height: 130px; font-size: 85%; text-align: center; margin: 0 auto;">
<p style="padding: 40px 40px; line-height: 1.4em;"><strong>Our Mission:</strong> To provide the highest quality and affordable piano and music education to all members of our Los Angeles community.</p>
</div>

Thanks,
Connie
  #2  
Old Jan 6, 2012, 02:33 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You need to change the HTML to something like this
HTML Code:
<div id="aa">
<p><strong>Our Mission:</strong> To provide the highest quality and affordable piano and music education to all members of our Los Angeles community.</p>
</div>
Then create a css selector to address the div
HTML Code:
div#aa {...}
then code the css rules for all of this
HTML Code:
style="background: url('http://socalpianoacademy.com/dev/wp-content/uploads/2012/01/mission_doily.gif') no-repeat; display: block; width: 305px; height: 130px; font-size: 85%; text-align: center; margin: 0 auto;"
then you need another CSS Selector for the <p>
HTML Code:
div#aa p {...}
and code the rules for
HTML Code:
style="padding: 40px 40px; line-height: 1.4em;"
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Jan 6, 2012 at 09:22 PM.
  #3  
Old Jan 7, 2012, 03:31 PM
LilyBurbank
 
8 posts · Aug 2010
Thank you! And though I've tried the same idea for sidebar text widgets, it's not working and I assume I just don't have the correct selector. Using Firebug inspector, the text widget I'd like to style is titled div#text-9. Should this then be the correct CSS?

div#text-9 {
border: 5px solid #cccccc;
background-color: #66cccc;
}

and

div#text-9 p {...formatting...}
  #4  
Old Jan 7, 2012, 03:49 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
1) I don't see that in your css inserts
2) check your css inserts for a syntax error - you have one
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 7, 2012, 03:54 PM
LilyBurbank
 
8 posts · Aug 2010
I think of myself as having an eagle-eye. How then did I miss the closing parenthesis instead of a closing bracket? I've donated to BFA before, but I have to send you something for saving me time torn-out hair.

You are wonderful - has anyone ever told you that??
- Connie Nassios

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Style 'Custom Menu' widget (WP 3.0) hlietz Sidebars & Widgets 10 Jan 22, 2011 08:41 AM


All times are GMT -6. The time now is 11:08 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.