Remove whitespace between header and gkTab and change color

Create fresh and professional look of personal or blog websites with AppsPro Tech
GK User
Tue May 07, 2013 9:26 pm
1. I want to reduce the whitespace between the logo and the first icons below it.

Website: http://nixx.co/inv/

I've looked through old posts and tried enabling css override and using this code but nothings worked:

Code: Select all
/* attempt 1*/
.item-page header {margin-bottom: 1px}
.gkIsWrapper-gk_appsprotech {margin-bottom: 0px!important;margin-top: -40px!important;}

/* attempt 2 */
article header { margin-bottom: 5px!important;}


2. I want to change the orange text to green. I know you have to edit the .css files I just can't find the right one. I changed most of the others. Also, I want to change the white text "Cloud" "Umbrella" etc, to green


Thank you for any advice!
User avatar
Fresh Boarder

GK User
Wed May 08, 2013 3:38 am
Whitespace
template.css line 103 change to minus value such as below.
Code: Select all
#gkMainMenu + #gkPage {margin-top: -45px !important;}


Bottom modules text color, change #FFB69E, add in override.css
Code: Select all
#gkBottom1 {color: #FFB69E; }


White text color tabs titles, change #ffffff, add in override.css,,
Code: Select all
.big .gkTabsWrap.vertical ol li {color: #FFFFFF!important;}


See you around...
User avatar
Platinum Boarder

GK User
Sat Jun 01, 2013 10:13 am
Hi, I tried this but nothing happen.

I wanna remove the white space below the main menu bar (in between it and the slide show) and above it (between it and the logo)

I tried to add minus value to the line 103 in template.css but seems that nothing happened.

Please help.

Thanks a lot in advance.
User avatar
Fresh Boarder

GK User
Sat Jun 01, 2013 10:35 am
OK, I managed to get the result, but it applies to other page, OTHER than the HOME page. So, may I know how do I change the one at the home page, please? Or is it actually the fault of the slide show that I must change?
User avatar
Fresh Boarder

GK User
Sat Jun 01, 2013 1:55 pm
You can use page suffix option in template settings > features and set a suffix for your home menu item.

Then change each css to match your homepage suffix. Example if home page suffix is " home" then css would change to below.

Code: Select all
.home #gkMainMenu + .home #gkPage {margin-top: -45px !important;}
.home #gkBottom1 {color: #FFB69E; }
.home .big .gkTabsWrap.vertical ol li {color: #FFFFFF!important;}


Let me know if you cannot setup page suffix then I ll show more in depth tutorial.

See you around...
User avatar
Platinum Boarder

GK User
Sat Jun 01, 2013 2:16 pm
Hi, Thanks a lot for your prompt reply.

Oops, looks like I do need an in-depth tutorial from you, as I have too many question marks in my head on that. :shock:

How do I set a suffix and what does setting a suffix means?
So sorry, am really noob when it comes to technicals.

Thank you very much for your help.
User avatar
Fresh Boarder

GK User
Sat Jun 01, 2013 3:07 pm
See my post in below topic.

https://www.gavick.com/forums/therealde ... e%20suffix

This is same as yours, only difference is replace .homelogo with your suffix and add them to beginning of your css codes as I have replied in my previous reply. See .home

Setting a suffix to a menu item means when that menu item is accessed then system will add extra css class to your page so any css codes defined under this css class will take effect. So other pages will not have this css class so it will not load our added css codes in this topic.

See you around...
User avatar
Platinum Boarder


cron