Coppermine Premade S301: 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.



Dark Mode Switch

Guest Night Mode:

This theme comes built-in with a "Night Mode" Switch feature. Using a small amount of Javascript it will save the theme chosen by your guests via Browser Cookies so when they visit in the future it will be automatically apply their preference.

This means your theme by default is light themed but any visitor has the choice to switch to dark mode if they choose and it will remember their settings every time they visit.

Dark Theme Override:

Because this theme comes built-in with a "Dark Theme" that is used by the "Dark Mode Switch" feature, you also have the power to use this theme and override the light theme entirely. To have this theme override the default light styling 24/7 all you need to do is add the following class shown below to your <body> tag.

Turn on Dark Mode Permanently:

<body class="dark">

Helpful Tip: Don't forget to hide the "Dark Mode Switch" button if you're using the dark theme permanently.

Hide Dark Mode Switch Button:

This is ideal if you have placed the "dark" class in your <body> tag and are using the dark theme permanently and do not need to offer the switch for visitors to use. The switch doesn't work properly if the "dark" class is already in the <body> tag before it can add it itself. So, it's best to hide the button to prevent any issues.
<body class="hide_darkmodeswitch">

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: .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 550px. Anything larger than that will be cut off. Tip: Height measurement uses pixels aka PX

Customize Your ThemeBack to top

I've simplified the ability to change and style 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.

Rounded Borders:

If you would prefer to make all the square containers on the theme have rounded borders for a smoother feel all you have to do is all the follow class to your <body> tag.

<body class="rounded_borders">


Change Body Font:

Default Font: Open Sans

Open Sans

<body class="bodyfont_opensans">

Lato

<body class="bodyfont_lato">

Merriweather

<body class="bodyfont_merriweather">


Change Navigation Font:

Default Font: Montserrat

Montserrat

<body class="navfont_montserrat">

Oswald

<body class="navfont_oswald">

Merriweather

<body class="navfont_merriweather">


Change Navigation Font Style:

Default Font Style: Bold, Caps

Normal

<body class="navfont_style_normal">

Bold

<body class="navfont_style_bold">

Italic

<body class="navfont_style_italic">

Bold & Italic

<body class="navfont_style_bold_italic">

All Caps

<body class="navfont_style_all_caps">

All Caps Bold & Italic

<body class="navfont_style_all_caps_bold_italic">

All Caps Italic

<body class="navfont_style_all_caps_italic">

All Caps Bold

<body class="navfont_style_all_caps_bold">


Change Heading Font:

Default Font: Playfair Display

Playfair Display

<body class="headfont_playdisplay">

Montserrat

<body class="headfont_montserrat">

Oswald

<body class="headfont_oswald">


Change Heading Font Style:

Default Font Style: Bold

Normal

<body class="headfont_style_normal">

Bold

<body class="headfont_style_bold">

Italic

<body class="headfont_style_italic">

Bold & Italic

<body class="headfont_style_bold_italic">

All Caps

<body class="headfont_style_all_caps">

All Caps Bold & Italic

<body class="headfont_style_all_caps_bold_italic">

All Caps Italic

<body class="headfont_style_all_caps_italic">

All Caps Bold

<body class="headfont_style_all_caps_bold">


Change Coppermine Navigation Font:

Default Font: Montserrat

Montserrat

<body class="cpgnav_font_montserrat">

Merriweather

<body class="cpgnav_font_merriweather">

Lato

<body class="cpgnav_font_lato">

Oswald

<body class="cpgnav_font_oswald">


Change Coppermine Navigation Font Style:

Default Style: Bold, Caps

Normal

<body class="cpgnav_style_normal">

Bold

<body class="cpgnav_style_bold">

Italic

<body class="cpgnav_style_italic">

Bold & Italic

<body class="cpgnav_style_bold_italic">

All Caps

<body class="cpgnav_style_all_caps">

All Caps Bold & Italic

<body class="cpgnav_style_all_caps_bold_italic">

All Caps Italic

<body class="cpgnav_style_all_caps_italic">

All Caps Bold

<body class="cpgnav_style_all_caps_bold">

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 Name:

<body class="hide_sitename">

Hide Social Navigation:

<body class="hide_socialnav">

Hide Site Name Icon:

<body class="sitenameicon_hide">


Site Name Icon

The default icon shown is the Star icon. You can change this or hide this if you don't wish to use it.

Heart Icon:

<body class="sitenameicon_heart">

Bullseye Icon:

<body class="sitenameicon_bullseye">

Diamond Icon:

<body class="sitenameicon_gem">

House Icon:

<body class="sitenameicon_house">

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