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.

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.

You can take my personal help in skype : om2000_cuet

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;
}

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;
}

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;
}

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;
}

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;
}

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

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

How to add company info and copyright info in the footer of wordpress theme
Answer: In the theme I shared. Check footer.php (as per the screenshot below)

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

OR

You can take my personal help in skype : om2000_cuet