Hey Nick,

I think ive fathomed how to change the color although I seem to wrestle with internal CSS components which seems to mean my code is ignored half the time. Theres clearly a process I need to go through but its a bit hit and miss.

**/SEE BELOW/**

.avia-icon-list .iconlist_icon{height:64px; width:64px; line-height: 60px; font-size: 30px; text-align: center; border-radius: 500px; position: relative; float:left; margin-right:30px; margin-left:2px; z-index: 5; border-style:solid; border-width:2px; color:#fff;

}



.main_color .avia-icon-list .iconlist_icon {

background-color: #d73119;

}

it seems that I can do it providing I have both parts but im not sure why. I got the first part from another post.

Anyway, my last question on this is how do I create this same entypo disc without the the list content to the right. This is mainly because I want to create individual entypo discs with my own descriptive text either above or below it (centred or left justified). Im kicking myself for not just asking that question at the start

Cheers

Andy

hi again…

and to add to this. what if all I want to do is use the entypo font pictogram inside a single disc/circle? exactly the same as the Icon list but without the text or dotted lines. I cant find anything to help me at all

Cheers

Andrew

Hi there,

I think we got our wires crossed as the section I was referring to is the ‘Avia icon_list’ the discs which contain the entypo glyphs. I wanted to change the disc and the outline and leave the entypo glyphs white. I also want to resize them too

When I use the inspector I come across the following…

media="screen"

.main_color .avia-icon-list .iconlist_icon {

background-color: #d73119 !important;

}

and whilst changing the color works in the inspector as soon as I drop it into the CSS of my child theme nothing changes. I thought adding !important might help (assuming I understood its importance which I guess now I dont!!) but it did nothing.

Thing is, this is where I usually come stuck as ive followed your instructions but things like this wont change. Im clearly not doing something but what is it that im doing wrong? Can you help me understand as my next thing is changing the dropdown background on the top nav and I know that will be the same issue.

Hi Nick,

thats great and I think when we talk basic changes like H1 text, logo heights etc… the way you mention seems relatively straight forward for a novice. Where Ive become continuously unstuck are things like the discs (behind the icons) if I want them a different colour or size, or to change things that have (what i call) nested button states – the drop down menu for instance as I want to change the colours of the ‘drop down’ background but because there are several states (off, rollover and sometime on) I cant quite find the right piece of code using the method you mention. I also want to alter the (moving) thin underline when you rollover the top nav so that I remove the middle ‘tick’ mark and increase the thickness slightly but again I can’t see where the correct code is amid a sea of other comments. This im sure is my inexperience but any clue as to how to deal with such things would be warmly received

Cheers

all the best

Andy

thanks and I found the min-width shall be made to the code below, but how can I add such change to the quick CSS?

.avia-button.avia-size-small{

padding:7px 10px;

font-size: 13px;

min-width: 120px;

}

.avia-button.avia-size-medium{

padding:10px 0px;

font-size: 14px;

min-width: 90px;

}

.avia-button.avia-size-large{

padding: 13px 30px;

font-size: 14px;

min-width: 127px;

OK, Thanks that helped.

Can you advise of the best way to increase the size of the phone # ?

Right now I’m using <font size=”4″>xxx-xxx-xxx

It doesn’t work well on all browsers,

Thanks

.menu-item a {

font-size: 20px!important;

}

Thanks man, this one works

Does one have to modify the CSS for this?

it doesnt seem to change the size. Here is what I have in my quick CSS:

#header {

position: fixed;

}

#main {

margin-top: 152px;

}

#top .social_bookmarks li a {

font-size: 30px;

}

.main_menu ul:first-child > li > a{

font-size: 21px;

}