Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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,765 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,765 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



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 12:11 AM.


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