Coppermine Premade TB101-V1: Documentation

InstallationBack to top

You can install your new theme using your favorite FTP client:

After installation, go to the configuration section to activate it: Config → Themes settings → Theme.

Helpful Tip: If once you apply your changes and a refresh show nothing changed then try clearing your browser's cache and hit refresh. It should work now.

CustomizationBack to top

Site Information

To add your information to the gallery, open template.html in your favorite editor and edit the placeholder text.

Site Branding

Footer Info

Other

ColorsBack to top

To change any colors listed below, I've applied a simplified method to make customizing the colors of the theme super easy.

The new method includes consolidating all the classes that use each individual color and grouping them together in the custom.css file. If you open custom.css in your choice of editor, you will see all the detailed instructions for each color. All you have to do is find the HEX Code of the color you wish to use and put it in the right class, save the file and it'll change everything for you. That way the style.css doesn't have to be edited at all.


You can use your own header image by simply replacing header.png with your own in the /images/ directory.

Can I Adjust The Header Height?

The answer is yes, you can! In custom.css, scroll down to the bottom of the file, or you can search "Header Image" to find the section you need.

Once you're there you should see the CSS Class for the header listed (IE: .sidebar-head or .mast-head), including the URL to the image and the height of the header. Both can be easily changed if need be. So, if your header image is shorter or taller than the default size on the theme, you can change the value of the height element.

Don't touch or change the background-image URL unless your header is named differently or in a different location. Changing the image path can accidentally break it if incorrect.

Maximum Height: The header area height is set to max out at 650px. Anything larger than that will be cut off. Tip: Height measurement uses pixels aka PX

Hide ElementsBack to top

I've simplified the ability to hide elements to further customize your theme by adding a CSS Class to the <body> tag. Each class is already setup in the custom.css file and ready to use.

The best part of this method is that you can apply multiple changes to the theme by using multiple classes at once. Simply add them in between the " " in the <body> tag in the template.html file.

Single Class Example:

<body class="YOUR_CLASS">

Multiple Classes Example:

<body class="right_sidebar light_sidebar hide_header hide_sitename">

IMPORTANT: Make sure each class is spaced apart like the example above.

Hide Site Slogan:

<body class="hide_siteslogan">

Hide Top Bar:

<body class="hide_topbar">

Hide Sidebar Header:

<body class="hide_header">

Hide Site Name:

<body class="hide_sitename">

Hide Mobile Social Navigation:

<body class="hide_socialnav">

To add more content to your sidebar copy the code below and paste it into the template.html file inside the "widget-area" class.

<section class="widget">
	<h2 class="widget-title"><span>Text Widget</span></h2>
		<div class="textwidget">
			Your text content goes here.
		</div><!-- .textwidget -->
</section><!-- .widget -->


Change Sidebar Alignment

Using the same method explained above for hiding elements, I've applied the same method to easily customize the sidebar.

You can reverse the location of the sidebar and content areas by using the class below in the <body> tag in the template.html file.

<body class="right_sidebar">


Light Themed Sidebar

This theme comes built-in with an alternate CSS styling for a light themed sidebar rather than the default dark one. To apply simply use the class below in the <body> tag in the template.html file.

<body class="light_sidebar">

This theme supports 2 types of menus: a primary menu and a social icons menu

Primary Menu

Open template.html in your favorite editor and edit the placeholder text as needed.

Social Icons Menu

While editing you can add/edit the URL for each of your social profiles. The theme will do the work for you by detecting which site you are linking to and display the matching icon accordingly.

33 Supported Sites: email (/contact/, /contact or mailto:), RSS Feed (rss, feed=, /feed/ or /feed), apple.com, blogger.com, dailymotion.com, deviantart.com, discord.com, dropbox.com, ebay.com, etsy.com, facebook.com, flickr.com, google.com, pay.google.com, plus.google.com, goodreads.com, instagram.com, messenger.com, patreon.com, paypal.com, skype.com, snapchat.com, soundcloud.com, spotify.com, tiktok.com, tumblr.com, twitter.com, twitch.tv, vimeo.com, vk.com, yahoo.com, youtube.com, weibo.com, wikipedia.com, wordpress.com, x.com

Theme FontsBack to top