WordPress Tricks

Tortuga By ThemeZee Modifications and Documentation

allaboutbasic

Tortuga By ThemeZee css style Modifications
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;
}

Tortuga By ThemeZee menu style Modifications

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;
}
Tortuga By ThemeZee slider style Modifications

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;
}
Tortuga By ThemeZee post title meta button Modifications

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;
}
Tortuga By ThemeZee older posts button style Modifications

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

Tortuga By ThemeZee widget section Modifications

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;
}
Tortuga By ThemeZee archive category page Modifications

18. If you want to change footer widget section background color use this code

.footer-widgets-wrap {
background: darkred;
}
Tortuga By ThemeZee footer widget backround Modifications

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

Published by allaboutbasic

100 thoughts on “Tortuga By ThemeZee Modifications and Documentation”

  1. 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.

    Like

    Reply

  2. 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 😉

    Like

    Reply

      1. 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

        Like

      3. 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

        Like

      4. 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

        Like

      5. Yes it works! Only not on a mobile device… guess I have to live with that?
        Thanks for your support 🙂

        Like

      8. 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

        Like

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

        Like

      11. and centered at iPad. I think it’s okay to not have it centered at iPad, Thank you so much for your support

        Like

      13. 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?

        Like

      16. 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

        Like

  4. 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?

    Like

    Reply

      2. 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.

        Like

    1. 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

      Like

      Reply

      1. 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.

        Like

  6. 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!

    Like

    Reply

  7. 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.

    Like

    Reply

    1. 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

      Like

      Reply

  8. 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.

    Like

    Reply

  9. 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. 😀

    Like

    Reply

      1. 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

        Like

  11. 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!

    Like

    Reply

      2. 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

        Like

      3. Hm, okay.
        I find that quite weird, because I managed to change everything else to that font using CSS.

        Like

      4. 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

        Like

  13. hi, could you please help me with the code to change post border color and slider border too? thanks for your help

    Like

    Reply

      2. 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

        Liked by 1 person

    1. 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…

      Like

      Reply

  17. 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

    Like

    Reply

      3. 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.

        Like

      4. 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

        Like

      5. 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?

        Like

      6. 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

        Like

  21. 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!

    Like

    Reply

Leave a comment