How to Customize Your AdThrive Mobile Theme

Today, I’m sharing an Easy Tutorial on How to Customize Your AdThrive Mobile Theme. This simple guide will help you craft the mobile site of your dreams!

How to Customize Your AdThrive Mobile Theme

Hey guys! Some of you may have noticed my mobile site has a new look. I’m kind of digging it! :) What do you think?

I know a few of my blogging friends are on AdThrive Mobile and might want to customize their theme, too. So I thought I’d share how I did mine. I know this post doesn’t apply to 99.99% of you, but I did want to share how I did this just in case any of my blogging pals out there might find it helpful. :) So anyway, if this is totally not your thing, feel free to skip this post and I’ll be back next week with your regularly scheduled programming! More recipes!! :) :)

BUT if you’re a blogger on AdThrive mobile, keep reading! :)

There are a few things you can customize on your AdThrive mobile theme. It’s mostly just colors and fonts. It won’t change anything about how your ads are displayed or affect your earnings.

In your WordPress Dashboard, click on AdThrive, then click on the Style tab. Here you can paste some code (I have lots of examples you can use below!) to customize your theme. Your white box will be blank, but as you can see, I’ve already got some code in mine. If your box already has some code in it, just paste this code below it.

Now, if you’ve never worked with code before, don’t be scared. At all. This isn’t the kind of code that can break your site. This is just styling code. Think of it as putting on a dress, not open heart surgery. If you don’t like what this code does, you simply take it off and it goes back to exactly the way it was before.

If you somehow mess up the code, it won’t break anything, it just won’t make any changes either. So don’t worry and get to experimenting! :)

 

Getting the Right Colors

First things first. You’ll need the color code to make any color changes. If you know your site’s six-digit color codes, great!! If you don’t, you can browse colors and get their six-digit code here: colorpicker.com

You can also use the Chrome ColorZilla plugin to click on any color on any website, and it will copy the six-digit color code to your clipboard. The ColorZilla plugin is also available for Firefox.

 

Start Customizing!

What kinds of things can you change? Here are some examples below:

/* Home Page Post Title Alignment and Background Color */
#content article.list .entry-title {
text-align: center;
background-color: #FF3D7F;
opacity: .8;
font-weight: 400;
font-size: 1.15em;
}

You can change the background-color for the post titles on your main page from the original gray to a more fun color! I’m using pink (FF3D7F). Just change out that 6-digit number for your own color code!

The opacity was originally .7, but if you change the color, you may want the opacity to be a higher number. With pink, my opacity looked better at .8.

You can change the the text alignment for the titles to left, right, or center.

You can also change the font-weight (bigger number will result in a bolder font) and the font-size, but I didn’t change mine.

To enable your new look, copy and paste the code from the blue box above into the white box under the Style tab. Make your color changes, then click Save Changes. Refresh the page on your mobile site to see the changes. If you don’t like it, just delete the code and click Save again. It’ll go back to the way it was before.

 

 

/* Post Title Color on Individual Pages */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a, #content h6 a {
color: #3FB8AF;
}

You can change the Post Title color to something fun!  Copy and paste the code above into the Style box and click Save Changes.

 

/* Links Inside the Post */
a:visited { color: #FF3D7F; }
a { color: #FF3D7F; }


Make links stand out in your post! You can change the link color and the visited link color. I always keep these two colors the same, but you could make them different colors if you wanted.

 

/* Menu Background Color */
#site-navigation {
background-color: #3FB8AF;
}

You can make your menu fun and colorful! Use the code above to change the background-color.

 


/* Menu Link Color and Border */
#site-navigation ul.menu li a {
color: #FFFFFF;
border-bottom: 1px solid #7FC7AF;
}


If you change the menu background color, you may also want to change the font color (I kept mine white, FFFFFF) and the border-bottom color (the lines between the links).

 

/* Author Comment Color and Background Color */
.bypostauthor {
background-color: #FF3D7F;
color: #ffffff;
}

Make your comments stand out amongst the crowd! You can give your comments a bright background so readers will immediately know when you’ve replied to a comment. You can change the background-color (mine is pink) and the color, which means the font color (mine is white).

 

/* Author Comment Link Color */
.bypostauthor a, .bypostauthor a:visited {
color: #FF9E9D;
}

Now this is totally optional, and I just did it for fun, because you can. You can change the link color for your comments. They are originally white, and they look fine as white. But I changed mine to this light pink color. That way people can tell if I post a link in one of my replies to their comments.

 


/* Smaller Menu */
#site-navigation ul.menu li a {
list-style-type: none;
line-height: .5;
}


This is another one you may not need. But if you have more than about 5 items in your menu, they get cut off. I just made the spacing between the lines a little bit smaller so I could fit more links. The line-height is originally 1.5, but I changed mine to .5. If you have a longer menu, you can experiment to see which looks best on your mobile site. If you do this, check your recipe card after saving. It could make the lines spacing too close together. If this is this case for your site, just delete these lines.

 

Finishing Up Your New & Improved Site

Paste any or all of the above code that you want to use into the white box under the Style tab and click Save Changes. Refresh the page on your mobile site and see how you like it! Again, if you don’t like it, just go back to the Style tab and delete the code you added. Deleting it will just make the site go back to how it originally looked, so you’re not out anything.

One last thing. Under the Appearance tab, you can use the drop-down boxes to change the Heading Font (Post Titles on individual posts) and Body Font (the text inside your posts). I changed mine to Georgia, which is the font I use on my desktop site, just to make the two sites more cohesive.

So anyway! That’s a good start to customizing your theme and getting it to feel a little bit more like your desktop site. :) If you made it this far, I hope this helps!!

If you have any questions, please let me know and I’ll try to help. :) Good luck and have fun playing! :)