If you are will to create a food or recipe related blog/site then Veggie theme by Anariel Design is for you. You can show your unique cooking techniques and recipe to the world using this Veggie theme.
Theme Veggie by Anariel Design comes free with wordpress.com premium or business plan.But if you are using wordpress.com free plan then you have to purchase it with $79.
Here I am sharing you some css styling using which you can give the veggie theme a new look as your own.
If you have any question or changes in mind feel free to ask me in comments section
or
You can take my personal help in skype : om2000_cuet
**** Top Header Logo Section Modification ****
Question 1: To reduce white space just top and bottom of the header logo area in Theme Veggieby by Anariel Design
.site-logo {
margin-bottom: 0px !important;
}
#masthead {
padding-top: 0px !important;
margin-bottom: 0px !important;
}
Question 2: To change the color of top social icons
.social-navigation a {
color: green !important;
}
Question 3: To change top social icons hover color
.social-navigation a:hover {
color: red !important;
}
**** Top Menu modifications ****
Question 4: To change top and bottom border color and thickness (width) in top menu section
.primarymenu {
border-color: red !important;
border-width: 1px !important;
}
Question 5: If you want to use background color in top menu
.primarymenu {
background-color: yellow !important;
}
Question 6: To change font size, color and font family of top menu font item
.main-navigation a {
font-size: 12px !important;
color: darkred !important;
font-family: cursive !important;
}
Question 7: To change sub menu background color
.main-navigation ul ul {
background: darkred !important;
}
Question 8: To change submenu menu item font color
.main-navigation ul ul a {
color: white !important;
}
*** Blog / Archive (Category, Tag, Archive, Search) page modifications ***
Question 9 : To change Blog or Archive page titles font color, size and font family
.blog .entry-title, .blog .entry-title a, .archive .entry-title, .archive .entry-title a {
color: red !important;
font-size: 26px !important;
font-family: !cursive important;
}
Question 10 : To change Hover color of blog or Archive page titles
.blog .entry-title a:hover, .archive .entry-title a:hover {
color: green !important;
}
Question 11 : If you want to change Continue Reading font color, size and font family
.more-link {
font-size: 18px !important;
color: red !important;
font-family: cursive;
}
Question 12 : If you don’t want to show border below the Continue Reading
.more-link {
border: none !important;
}
Question 13 : If you want to make the continue reading to be a button shape
.more-link {
background: darkred;
padding: 12px;
color: white !important;
}
Question 14 : If you don’t want to show Post date, Author and Comments below the post content in Blog or Archive pages
.blog .entry-meta, .archive .entry-meta {
display: none;
}
Question 15 : If you want to reduce gap between two posts in archive and blog page
.archive article, .blog article {
margin-bottom: 12px !important;
}
Question 16 : If you want to use border as separator between two posts in blog or archive pages
.archive article, .blog article {
margin-bottom: 21px !important;
border-bottom: 2px solid darkred;
}
**** Single Post modifications ****
Question 17 : To change single post font size, color and font family in Theme Veggieby Anariel Design
.single .entry-title {
color: red !important;
font-size: 26px !important;
font-family: cursive !important;
}
Question 18 : If you want to reduce gap between post date, author etc and starting of post
.single .entry-meta {
margin-bottom: 12px !important;
}
Question 19 : If you don’t want to show post date and author name in single post page
.single .entry-meta {
display: none !important;
}
Question 20 : If you want to reduce gap between top menu and single post thumbnail image
.single .primarymenu {
margin-bottom: 12px !important;
}
Question 21 : If you want to make your single post to be full width
.single #secondary {
display: none;
}
.single .site-main {
margin: 0 0% 0 0;
}
.single .post-thumbnail img {
width: 100% !important;
}
Question 22: To change font size, color and font family of single post contents
.single .entry-content, .single .entry-content * {
font-size: 16px !important;
color: black !important;
font-family: cursive !important;
}
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
All About Basic 