Tortuga is a flexible and adventurous WordPress theme for your magazine, personal blog, or any news-related website. It supports a grid layout for posts, an optional sidebar, and a beautiful featured-post slider. You can check Tortuga theme Demo.
It is a 2 (two) column premium wordpress.com theme and if you want to build your site using Tortua theme the css styles i shared here will be helpful for you. You can use my shared code and ask question in the comments section.
You can take my personal help in skype : om2000_cuet
Also to protect your wordpress site, you can check WordPress site security from hacking.
1.If you want to modify Header background color of Tortuga theme
.site-header {
color: #fff;
background: darkred;
}
2. If you want to change the selected menu’s background color of Tortuga By ThemeZee
.main-navigation-menu li.current-menu-item > a {
background: darkblue;
}
To change the border color which is showing below the menu in Tortuga By ThemeZee
.primary-navigation-wrap {
border-bottom: 5px solid darkblue;
}
To change hover menu background color
.main-navigation-menu a:hover {
background: darkblue !important;
}
3. In slider if you want to change slider post title’s font color, font size and font family in theme Tortuga By ThemeZee
.slide-content h2 a {
color: black !important;
font-family: cursive;
font-size: 24px !important;
}
4. In slider, if you don’t want to show post date and author name
.slide-content .entry-meta {
display: none !important;
}
5. In slider if you want to change the author and post date’s color,font size and family
.slide-content .entry-meta, .slide-content .entry-meta * {
display: none !important;
font-family: cursive;
font-size: 20px !important;
color: black !important;
}
6. If you want to change “Continue Reading” and slider navigation arrow background color
.slide-content .more-link {
background: darkred !important;
}
.zeeflex-direction-nav a {
background: darkred !important;
}
7. If you want to change the Hover background color of “Continue Reading” and “Next Previoius” navigation arrow in slider of theme Tortuga By ThemeZee
.slide-content .more-link:hover {
background: darkgreen !important;
}
.zeeflex-direction-nav a:hover {
background: darkgreen !important;
}
8. If you want to modify the slider content’s font color, font size and font family of theme Tortuga By ThemeZee
.slide-content .entry-content {
font-family: times new roman !important;
color: red !important;
font-size: 15px !important;
}
9. If you want to change homepage post title’s font color,size and font family
.home .entry-title a {
color: darkred !important;
font-family: ‘Titillium Web’, Tahoma, Arial;
font-size: 28px;
}
10. If you don’t want to show Post date and Author in homepage posts of theme Tortuga By ThemeZee
#main .entry-meta {
display: none !important;
}
11. If you want to change Post Date and Author’s font family color and size use this code.
** This will apply to Homepage, post page,single page and other pages too.
#main .entry-meta *
{
color: darkred !important;
font-family: ‘Titillium Web’, Tahoma, Arial;
font-size: 18px;
}
12. If you want to change the “Continue Reading” in home page posts of theme Tortuga By ThemeZee
*** also applicable for archive and category pages too.
#main .read-more a {
background: darkred !important;
}
13. If you want to change the hover background color of “Continue Reading” button in home page,archive page and category page post section use this code
#main .read-more a:hover {
background: darkblue !important;
}
14. If you want to change “Older post” button (showing at the bottom of posts) background color and Hover color
#infinite-handle span {
background: darkred !important;
}
*** to change hover background color
#infinite-handle span:hover {
background: darkred !important;
}
15. If you want to change Widget title font color, size and font family
.widget-title {
font-family: ‘Titillium Web’, Tahoma, Arial;
font-size: 20px;
color: darkred !important;
}
16. To change widget links color font family and font size of theme Tortuga By ThemeZee
.widget li a {
color: darkred;
font-family: cursive;
font-size: 15px !important;
}
*** to change hover color of the links in widget section
.widget li a:hover {
color: darkblue !important;
}
17. In archive or category page if you don’t want to show the page header at the top
.archive .page-header {
display: none !important;
}
18. If you want to change footer widget section background color use this code
.footer-widgets-wrap {
background: darkred;
}
19. To change single post title, archive post title or page title’s font color, font size or font family use this code
.archive-title, .page-title, .entry-title {
font-family: ‘Titillium Web’, Tahoma, Arial;
font-size: 28px;
color: #dd5533;
}
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
Nice tips. However, I am trying to change the header background color by changing the style.css. But nothing seems to work. I am using a site logo for my header. I want my header to be white. Let me know if you can help please. Thanks.
LikeLike
Hi Praveen
please try this code
.site-header {
background: white !important;
}
let me know if it helps
Om
LikeLike
I tried that as well, nothing seems to work. Looks like it is looking at some other style.css file.
LikeLike
Hi
install simple custom css plugins…and put the css code there
Om
LikeLiked by 1 person
Awesome, that works. But now that I see how it looks with the white background, I think I will stick with the original :-).
I had one other question: How do I remove the thumbnail appearing in the homepage in the excerpt section of my posts?
website: http://www.dailymorningcoffee.com
Thanks for the help!!!
LikeLiked by 1 person
HI Praveen
try this code
.home .post-wrapper a img {
display: none !important;
}
Om
LikeLike
Actually it was a plugin that was creating the thumbnail. I just removed it. Thanks.
LikeLike
Ok great
LikeLiked by 1 person
Hi, how can I add text or a picture at the header and make it smaller? Already changed it into white but it’s so ugly now 😉
LikeLike
THanks
share me the site URL please
Om
LikeLike
Hi,
Thank you for your response.
Already found out how to display a picture in the header. Question left: can I center the logo in the header? And can I get rid off the blue line under the menu?
Thanks in advance.
https://boekenzonderzoeken.com
LikeLike
https://boekenzonderzoeken.com
LikeLike
Yeah!! Managed to get rid of the blue line below the menu. Now the only question that still there is: Can I center the logo in the middle of the heather. Thanks so much
LikeLike
please try this
@media (min-width: 980px) and (max-width: 900000px) {
.site-description {
position: absolute;
top: 3% !important;
right: 3%;
}
.site-branding .custom-logo {
float: none;
margin-left: auto !important;
margin-right: auto !important;
display: block;
width: 150px !important;
}
}
let me know if it helps
Om
LikeLike
Yes it works! Only not on a mobile device… guess I have to live with that?
Thanks for your support 🙂
LikeLike
can you share me screenshot how it is looking in your end in mobile please?
Om
LikeLike
Of course..How can I attach it?
LikeLike
i checked the mobile view
try this code
@media (min-width:240px) and (max-width:560px) {
.site-description {
float: none !important;
}
.site-branding .custom-logo {
float: none !important;
}
}
let me know if it helps
Om
LikeLike
Think we’re almost there, it works on iPhone not on iPad
LikeLike
would u mind to check by replacing the previous code with this?
@media (min-width:240px) and (max-width:900px) {
.site-description {
float: none !important;
}
.site-branding .custom-logo {
float: none !important;
}
}
LikeLike
and centered at iPad. I think it’s okay to not have it centered at iPad, Thank you so much for your support
LikeLike
ok great 🙂
LikeLike
Hi, can you please help me out with this one:
How do I do this:
“Install your code for your campaign just before the tag of your site’s template”
How can I get there?
LikeLike
Hi,
you are using wordpress.com right? if yes..which plan?
also.. is that 3rd party campaign code you want to use in your site?
please let me know
Om
LikeLike
I am using Tortuga. Yes it is campagne code
LikeLike
which plan of wordpress.com you are using? Premium or business?
if the campaign code is javascript code snippet, then you can only use it when you are using business plan as i know
Om
LikeLike
ok I understand, I am using premium. Thanks anyway
LikeLike
🙂
LikeLike
Also would like to have the logo in the middle off the header. Is that possible?
LikeLike
Hi
thanks
share me the site URL
Om
LikeLike
Here I am again 🙂 Sorry to bother you again, but you’ve been such a great help. I’ve disabled “reactions” but now it says above every blogpost: “Reacties staat uit”. Is there a way not showing this sentence?
LikeLike
thanks
sorry for the late response
i think you are searching this
.meta-comments {
display: none !important;
}
let me know if it helps
Om
LikeLike
That’s no problem, you are a great help, it worked again!!
LikeLike
Hi Om, I am really happy with my site, thanks to your help. Is there a way to change the word “Home” in the menu-item into an (home)icon? Looking forward to your answer.
LikeLike
share me the icon image url to check
Om
LikeLike
One more question that I hope you can help: How can I put these pictures next to each other instead of under each other? https://boekenzonderzoeken.com/heerlijke-huizen/
LikeLike
Thanks
to show only that 2 image side by side, try this code
#attachment_1620, #attachment_1718 {
float: left;
width: 48% !important;
margin-bottom: 10px !important;
}
let me know if it helps
Om
LikeLike
It works thanks again 🙂 did you see my question above about the home-icon? I would really be thankful if you can help me with that one also.
LikeLike
yes…i replied
please share me the icon image url to check
Om
LikeLike
Hope this works? https://boekenzonderzoeken862983252.files.wordpress.com/2018/04/home.png
LikeLike
Try this code
#menu-item-88 {
background: url(https://boekenzonderzoeken862983252.files.wordpress.com/2018/04/home.png);
background-size: 56% !important;
background-position: center;
background-repeat: no-repeat;
}
#menu-item-88 a {
visibility: hidden !important;
}
let me know if it helps
Om
LikeLike
Hi Om, the icon is visible so far so good, but it’s not clickable….
LikeLike
Would you mind to communicate me in my fiverr profile please?
Om
LikeLike
Hi Om,
Thank you for a lovely theme. I’d like to make sure the text box is centered on mobile devices. It’s great on laptop, but on mobile, it leans to the right. Do you have a code for this? Also, where would I put the code? Additional CSS?
Thanks!
LikeLike
HI lazywisdomnews
would u mind to tell which text box you are referring please?
please let me know
Om
LikeLike
Hi Om! Thank you for replying. I appreciate it.
The text box I’m referring to is the blog that one reads IN FULL. So as a reader, you go to homepage, then click on the title of the blog you want to read. Then it opens up so you can read the full article. On a mobile device, the box with the text in it leans to the right. It is not centred.
LikeLike
HI lazywisdomnews
try this code
let me know if it helps
@media (min-width: 240px) and (max-width: 600px) {
.panel-layout div {
margin-left: auto !important;
margin-right: auto !important;
}
}
Regards
Om
LikeLike
Thank you so much Om. This worked perfectly. If I need more help, I’ll communicate via your fiverr profile. I appreciate your help, and thank you again for such a beautiful theme.
LikeLike
thanks a lot 🙂
LikeLike
Thanks so much for your educational tips! I love the uniform appearance provided by the Tortuga grid layout. But I’m wondering: is it possible to shorten the height of the grids? I know that will cut off text in some instances, but I prefer shorter grids if possible. I’m on the Business plan and have not yet installed Tortuga. Doing my homework first. 😀
LikeLike
Hi Pam
you want to shorten the grid height by reducing the excerpt text in homepage?
please let me know
Om
LikeLike
Ideally, the boxes would all maintain the same shorter height, like in the theme’s demo, regardless of excerpt length. I don’t want to shorten the text for SEO reasons. Thx
LikeLike
Hi Pam
actually it would better if i could check your site live
otherwise it is tough for me to check properly
Om
LikeLike
Hi. What is CSS to make footer widget full width?
LikeLike
HI
the footer widget section is already full width i found?
Om
LikeLike
Hi, great tips!
I’m having trouble changing the font of the menu.
I wan’t it to be Trebuchet MS, sans-serif but nothing I try seems to work.
Thanks in advance!
LikeLike
Hi Marcus Wrangbert
which plan of wordpress.com you are using?
please let me know
Om
LikeLike
Hello, don’t know if my earlier reply went through, but I’m using premium.
LikeLike
HI Marcus Wrangbert
actually if premium plan doesn’t include that font you want to use….. then without using business plan ( there you can use plugins as i know) you seems can’t use that font
Om
LikeLike
Hm, okay.
I find that quite weird, because I managed to change everything else to that font using CSS.
LikeLike
Hi Marcus Wrangbert
is that font showing from other computers too?
if you only need css..then i think you need this
.main-navigation-menu a {
font-family: Trebuchet MS !important;
}
please let me know
Om
LikeLike
That did the trick!
I don’t know if it shows on other computers. I’ll let you know when I do.
Thanks!
LikeLike
Ok
please don’t forget to let me know what you get after checking from other computers or laptops or tabs
Om
LikeLike
hi, could you please help me with the code to change post border color and slider border too? thanks for your help
LikeLike
thanks
in which site you are working on?
share me that URL
Om
LikeLike
im working on http://www.virtualdreamart.com thanks to your previous help in this post i can change almost everything in the page but the orange top border of the posts and sliders. thanks in advance for your time
LikeLike
Thanks
you can use this code to change the border color above the post and slider
.type-post, .type-page, .type-attachment, .comments-area {
border-top: 3px solid blue !important;
}
please let me know if it helps
Om
LikeLiked by 1 person
it worked perfect!! you’re truly amazing!! thanks you very much
LikeLike
also i need some help changing the color of the featured post’s tittles i tried with
.archive-title, .page-title, .entry-title {
font-family: ‘Titillium Web’, Tahoma, Arial;
font-size: 28px;
color: #dd5533;
}
but it just change the font family but not the color…
LikeLike
Would you mind to try this code please?
.archive-title, .archive-title a,.page-title, .page-title a,.entry-title,.entry-title a {
color: #dd5533 !important;
}
let me know if it helps
Om
LikeLiked by 1 person
perfect! thanks you very much!!
LikeLike
in mobile and tablet view there is a button to display the menu how i can change it color?
LikeLike
Try this code
@media only screen and (max-width: 60em){
.main-navigation-toggle {
background: red !important;
}}
let me know if it helps
Om
LikeLiked by 1 person
it worked perfect! thanks you! you’re truly amazing
LikeLike
Hi Om,
Unsure if this has been asked yet but I’m looking for two things: 1. how to center my navigation bar to coincide with my logo and 2. how to add a image in the actual header (not below the navbar). If you could help me with this I’d appreciate it!
Thatcher
LikeLike
This is the website in question: https://fryingpanmedia.com/
LikeLike
HI Thatcher
sorry for the late to reply
your site seems private mentioned..and i am unable to check
Om
LikeLike
Hello!
Is there a way to change the height of the Header banner picture?
I can’t get it to work.
LikeLike
Hi Filip
sorry for the late response
would you mind to share me your site URL where you are using tortuga theme please?
Om
LikeLike
Certainly,
thelookout-dbs.com
I’ll reupload the banner so you can have a look.
LikeLike
Yes please Filip
please upload it and let me check
Om
LikeLike
I have uploaded it, thank you.
I have tried to change the designated height with cropping it, which didn’t help, tried to do something with css but it either didn’t work or I inputed the wrong code. I am new to this.
LikeLike
HI Filip
@media (min-width: 960px){
.site-description {
margin-top: 32px !important;
}
div#logo img {
max-width: 19% !important;
}
}
is that something you are asking?
please let me know if the code works
Om
LikeLike
This also helps me for the upper logo and thank you a lot, I can now edit the upper part how I want,
but the height I am trying to change is of the lower one, under the navigation buttons.
Do you know how to change that perhaps?
LikeLike
Oh sorry Filip
try this code
div#headimg img {
max-width: 42% !important;
display: block;
position: relative;
margin-left: auto !important;
margin-right: auto !IMPORTANT;
}
.header-image {
background: white !important;
}
let me know if it helps
Om
LikeLike
That’s the one, works perfectly, thank you!
LikeLike
Hello,
My new posts are ending up at the bottom of the page. Have you encountered this problem before and do you how to fix it? Thank you!
LikeLike
Thanks
in which site u r working?
can u share me the post url where the issue showing?
Regards
Om
LikeLike
Hey allaboutbasic, using the theme here and trying to center the menu. I’ve already centered the title but it looks weird without the menu being centered too.
Here’s a link https://xn--philiphammershi-jub.dk/wpherningaso/
i tried
ul#primary-menu.menu{
text-align: center !important;
display: block !important;
}
but it did not work.
LikeLike
Hi Philip
try this please
nav#site-navigation {
display: block;
float: none;
margin-left: auto;
margin-right: auto;
}
Regards
Om
LikeLike
Perfect it works! thanks! and have a nice weekend ^^
LikeLike
Pleasure
LikeLike
We like Tortuga a lot, I only have one question: how can I change the buttons style (read more..buttons) with some rounded border or a different color using CSS? Thank you so much!
LikeLike
Hi Iltigullio
thanks
would you mind to share me the site URL you are working please?
Regards
Om
LikeLike
https://iltigullio.com (I’d like to have some round corners on the blu buttons)
LikeLike
Thanks,
you can check this code
a.more-link {
border-radius: 7px !important;
border-color: red !IMPORTANT;
background: red !important;
}
Regards
Om
LikeLike
Thanks a lot from Italy! 😇
LikeLike
🙂
pleasure
LikeLike
Hi
in the Mobile view, can we menu move the menu a little to the corner? there is a gap between screen and menu
LikeLike
Hi Yang
share me your site url to check
Regards
Om
LikeLike