Goran By Automattic: CSS Style Modifications, Support and documentations

Goran is a functional and responsive multi-purpose theme that is the perfect solution for your business’s online presence.

theme goran by automattic

If you are using wordpress.com then you can use the theme for free, or if you are using your own hosting or wordpress.com business plan then you can download it from the link below including child theme.

Goran theme Parent zip download

Goran theme Child theme zip download

I am sharing you css styling modifications using which you can give the Goran theme a new look of your choice.You can ask question regarding any issue you are facing.

Or can take my personal help.

Question 1: How to change background of Goran theme?
Answer : go to dashboard > Appearance > Customize >Colors & Backgrounds and you can change the background color of the theme

*** To change the background color of the top bar where phone number showing

.site-top-content {
background: darkred !important;
}

*** to change the top phone number font color, font size and font family

.site-top-content {
font-size: 23px !important;
color: white !important;
font-family: cursive !important;
}

Question 2: To change the light grey background which is showing behind the header title and menu

.hero-image .site-header {
background: rgba(111, 333, 0, 0.225) !important;
}

if you want to remove the light grey background completely, try this code

.hero-image .site-header {
background: transparent !important;
}

goran theme top header modification
Question 3: To change site title’s font color, font size and font family

*** though you can select site’s font from dashboard > Appearance > Customization > Fonts , but to use your own font you will need to use the following code (to change font size, color and font name)

.site-title a {
font-size: 29px !important;
color: darkred !important;
font-family: cursive !important;
}

*** to change site title’s hover font color

.site-title a:hover {
color: kred !important;
}

Question 4: To change the border color which is showing below the Home menu and hover over the other menu items.

.main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active, .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a {
border-bottom-color: red !important;
}

Question 5: To change the navigation menu font color, font size and font family

.main-navigation a {
color: darkred !important;
font-size: 16px !important;
font-family: cursive !important;
}

Question 6: To change the navigation menu hover font color in Goran theme
.main-navigation a:hover {
color: red !important;
}

Question 7 : To change drop down menus background color in Goran theme

.main-navigation ul ul a {
background: green;
}

*** to change drop down menus surrounding border color

.menu-primary .sub-menu {
border: 1px solid green !important;
}

*** to change drop down menu separator color

.main-navigation ul ul li {
border-bottom: 1px solid yellow;
}

goran theme homepage featured image content and button modification

Question 8: To change top header text font size, font family and to show them center (including button)
.hero.with-featured-image {
text-align: center;
font-size: 23px !important;
line-height: 34px !important;
}

*** to change top header image button background, font color, size and font family

.hero a.button {
background: red !important;
color: white !important;
font-size: 19px !important;
border-color: red !important;
font-family: cursive;
}

Question 9: To change footer widget area background color

div#tertiary {
background: darkred !important;
}

Question 10: To change footer widget are link color, font size and font family

.footer-widget li a {
color: blue !important;
font-size: 18px !important;
font-family: cursive !important;
}

 

goran theme footer widget section modification

Question 11: To stylize the footer widget title using font color, text alignment,background, border and font size change

h2.widget-title {
font-size: 23px !important;
color: darkred !important;
font-family: cursive;
background: yellow;
text-align: center;
border-bottom: 1px dotted darkred !important;
}

Question 12: To change footer social icons size (smaller or bigger)

ul[id^=”menu-social”] a:before {
color: darkred !important;
font-size: 23px !important;
}

Question 13 : To change footer text widget font color, size and font family

.widget.widget_text p {
margin-bottom: 1em;
font-size: 15px !important;
font-family: cursive !important;
color: darkred;
}

Question 14: To reduce gap between widgets in sidebar

div#secondary .widget {
padding-bottom: 6px !important;
padding-top: 20px !important;
}

sidebar widget section modification

Question 15: Sidebar widget title’s font color, font size , font family, background and text alignment change

#secondary h2.widget-title {
color: darkred !important;
font-size: 23px !important;
font-family: cursive;
background: yellow;
text-align: center;
}

Question 16: Right sidebar widget links font color, font family and font size change

div#secondary li a {
color: blue !important;
font-size: 20px !important;
font-family: cursive;
}

Question 17 : To reduce gap between posts or articles in archive or category page

.archive article {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
padding-top: 16px !important;
}

reduce gap between posts in archive or category page

Question 18 : To reduce gap between post title  and start of post or article

.archive a.post-thumbnail {
display: none !important;
}

If you have any issue feel free to ask me question here in comments section

OR

Pay me some, I will help you for CSS Issue Personally CLICK HERE….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: