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 » Montezuma Theme »

CSS priorities when adding, for instance, widgets in footer....


  #1  
Old Mar 18, 2013, 08:17 AM
drex
 
11 posts · Jan 2010
when I add widgets in footer, as per http://forum.bytesforall.com/showthread.php?t=19079, it works great.

I need to change the color of the text in footer widgets...

I tried various things, the last being in the widgets.css file:

/* FOOTER WIDGET AREAS */
.widgetarea-three {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}


also tried same code as #widgetarea-three in styles.css but in any way it is all overwritten by aside#text4-widget.

So I understand that the overall widget style is overriding the particular default footer style I selected; how would I specify specific styles and where to override the default behaviors assuming i followed the coventions widgetarea-three, widgetarea-four, and widgetarea-five??

Thanks.
  #2  
Old Mar 18, 2013, 08:58 AM
jerryc
 
367 posts · Oct 2012
Florida
There's a simple way if you're only doing a few, without even editing the css files. Just put a style change in your template such as "style = color:#ffffff;" in your sidebar div.

If you were doing many, it would be easier to put it in a css file, especially if you wanted to change them.

If you want them to be all the same look, then give them a class, so if you change one, you can change them all with one css file edit.

Try different methods, then use firebug to check your results. Validate often as you go. Have fun.
  #3  
Old Mar 18, 2013, 09:40 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
In my opinion, you should avoid inline CSS when possible, without good notes, it can make future maintenance a nightmare. By putting it into the CSS styling, you keep things together and can reuse the same CSS for multiple HTML elements

I would put any additional CSS in the last CSS file (not at my desktop so I can't name exactly) and remember the order of precedence for CSS
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Mar 19, 2013, 11:58 AM
drex
 
11 posts · Jan 2010
I tried several ways, and created a footer class for widgets called footc1 as you can see in screenshot below.

however, whereever i put it, it's css keeps getting overridden.

can anyone help? i've tried to move it several places.

thanks in advance!
Attached Thumbnails
Click image for larger version

Name:	website1.gif
Views:	274
Size:	112.5 KB
ID:	2276  
  #5  
Old Mar 19, 2013, 02:13 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you need to be more specific in the CSS Selector. since the html structure is
HTML Code:
<div id="widgetarea-three" class="footerc1" style="padding: 0 10px">
      <aside id="text-4" class="widget widget_text cf">
        <div class="textwidget">
            your text is here
        </div>
     </aside>
  </div>
you should use 'div.footerc1 aside div.textwidget' - try that and see what it does
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Mar 19, 2013, 03:53 PM
drex
 
11 posts · Jan 2010
thanks for the reply juggledad and forgive my ignorance; where exactly should i put this??

'div.footerc1 aside div.textwidget'

should that be an entry under style.css or widget.css?

should that be

.div.footerc1 aside div.textwidget {

blah blah blah

}

or

#div.footerc1 aside div.textwidget

the html being generated is from the firebug plugin; the code generating it is from the subtemplate footer.

i'm sorry, but i am not following where exactly to put this...
  #7  
Old Mar 19, 2013, 05:06 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you can put it in any of the CSS files, though I'd probably put it at the end of the 'clearfix.css' so you would know that is where you override any CSS.

so you would add
HTML Code:
div.footerc1 aside div.textwidget {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}
there.
__________________
"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 juggledad; Mar 19, 2013 at 06:18 PM.
  #8  
Old Mar 19, 2013, 05:35 PM
drex
 
11 posts · Jan 2010
did that, does not change color;
HTML Code:
.widget {
    color: #666666;
    font-size: 14px;
    line-height: 1.3;
}
seems to overrule it. it is from
HTML Code:
html.notie67 body.home div#footer-bg div#footer.row div#widgetarea-three.footerc1 aside#text-4.widget
HTML Code:
<aside class="widget widget_text cf" id="text-4">			<div class="textwidget">&copy; 2013 H. Drexel Dobson III MD<br>
Surgical Associates of Brevard<br>
1004 Beverly Drive Suite D<br>
Rockledge, FL 32955<br>
321.637.2954 24 hrs availability <br>
321.637.2654 fax <br></div>
		</aside>
  #9  
Old Mar 19, 2013, 05:37 PM
drex
 
11 posts · Jan 2010
HTML Code:
.div.footerc1 aside div.text-4.widget {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}
didn't work either.
  #10  
Old Mar 19, 2013, 05:54 PM
jerryc
 
367 posts · Oct 2012
Florida
I see some syntax issues. Here are some basic syntax rules for CSS files:
  1. Elements have no punctuation before them.
  2. Classes are prefaced with a period.
  3. ID's are prefaced with a hash mark (#).
So, for example, you have a div with a period before it, but I doubt you're trying to refer to a class named div. You have a reference to text-4, which seems to be an id, but you have it prefaced with a period.

Try cleaning up your syntax, and you should have it.

Last edited by jerryc; Mar 20, 2013 at 01:23 AM.
  #11  
Old Mar 19, 2013, 06:20 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
go back and check my original CSS, there was an errant period which I removed. (I claim the ten month old in my arms did it)
__________________
"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 juggledad; Mar 19, 2013 at 06:27 PM.
  #12  
Old Mar 19, 2013, 08:22 PM
drex
 
11 posts · Jan 2010
thank you both.

so, i need to read up more on css conventions.

i take it that it is an element, a specific subset of a class, and not an id....

enjoy your 10 month old and thanks...
  #13  
Old Mar 19, 2013, 08:33 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Element is an HTML element. You should take a CSS tutorial, htmldog.comhas a good one
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Footer widgets and full-width footer background image problem Viktoria Sidebars & Widgets 4 Dec 2, 2012 03:06 PM
Adding Widgets within the Footer - Multiple rows? ssoszka Sidebars & Widgets 3 Dec 19, 2010 01:13 PM
[SOLVED] Adding whitespace between widgets ITByTheSea Sidebars & Widgets 2 Sep 27, 2010 11:45 AM
Adding Widgets to Footer MyJourneytoMillions Sidebars & Widgets 2 Jan 7, 2010 03:12 PM
Run more than one instance of Atahualpa brandonhorn Atahualpa 3 Wordpress theme 1 Jun 9, 2009 10:27 AM


All times are GMT -6. The time now is 04:51 PM.


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