THE KEY FEATURES - title centralisation and colour change.

Get help or discuss with other members about business Joomla! 3 and 2.5 template designed especially for your start-up projects on dedicated support forum.
GK User
Sat Oct 26, 2013 7:54 pm
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.
User avatar
Fresh Boarder

GK User
Sat Oct 26, 2013 9:33 pm
Could You please post an url to your site?
User avatar
Moderator

GK User
Sat Oct 26, 2013 9:34 pm
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).
User avatar
Moderator

GK User
Sat Oct 26, 2013 9:38 pm
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;
}
User avatar
Moderator

GK User
Mon Oct 28, 2013 12:10 am
Cyberek wrote: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.
User avatar
Fresh Boarder

GK User
Mon Oct 28, 2013 4:48 pm
If You will have any other questions, feel free to post new forum threads.
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.