THE KEY FEATURES - title centralisation and colour change.

Hello there,

In your demo - http://demo.gavick.com/wordpress/startup/ - section THE KEY FEATURES has 4 block with the following titles:

Innovative Design,

Award winning Agency

etc etc

I have 2 questions:

1. These titles are lined up to the left - how do I centralise these? I want my titles to be in the middle and centralised on each block.

2. In your demo the colour of these titles is grey but when you move your arrow onto a block the title colour switched to white.
I found how to chance the grey colour to another colour in one of the css files - BUT - I cannot find how to change the white colour - because my blocks (when you move an arrow over them) are white - and I need for the title to be of different colour - otherwise the titles is not seen white on white.

Thank you for your very kind help in advance.

Could You please post an url to your site?

If You havent done any changes to module positions etc, centering text in "the key features" can be done this way:
Please edit: wp-content/themes/Startup/css/override.css

Code: Select all

#gk-bottom1 a {
text-align: center;
}


Remember to enable "Use the override.css file" in theme settings (item in admin menu, under comments section, advanced tab).

2. Changing colors.
Again use override.css (I strongly advice not to edit core template css files. It will save You a lot of troubles while updating template):

Code: Select all

.gk-features > a {
background: #FFF;
}


Sets default (not hovered) background color,

Code: Select all

.gk-features > a:hover {
background: #EB592A;
}


sets hovered background color,

Code: Select all

.gk-features > a {
color: #363636;
}


sets not hovered text color,

Code: Select all

.gk-features > a:hover {
color: #FFF;
}


Sets hovered text color.
All together:

Code: Select all

.gk-features > a {
background: #FFF;
color: #363636;
}
.gk-features > a:hover {
background: #EB592A;
color: #FFF;
}


2. Changing colors.
Again use override.css (I strongly advice not to edit core template css files. It will save You a lot of troubles while updating template):

Code: Select all

.gk-features > a {
background: #FFF;
}


Sets default (not hovered) background color,

Code: Select all

.gk-features > a:hover {
background: #EB592A;
}


sets hovered background color,

Code: Select all

.gk-features > a {
color: #363636;
}


sets not hovered text color,

Code: Select all

.gk-features > a:hover {
color: #FFF;
}


Sets hovered text color.
All together:

Code: Select all

.gk-features > a {
background: #FFF;
color: #363636;
}
.gk-features > a:hover {
background: #EB592A;
color: #FFF;
}


Many thanks! All extremely helpful. All solved.

If You will have any other questions, feel free to post new forum threads.