If you would like to edit the color, font, or style of any elements, you would do the following:
|
1 |
#primaryContent a {color: #someColor;} |
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.
I.E.
|
1 |
#wrap #primaryContent a {color: #someColor;} |
So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.
Colors
The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:
|
1 2 3 4 5 |
<head> (..) <link rel="stylesheet" type="text/css" href="css/motive.css"> (..) </head> |
Main Menu structure
Just change brand name, upload your logo to images/content/ folder and you’re ready to go!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<nav class="navbar ct-navbar navbar-default yamm ct-navbar--fadeIn" role="navigation"> <div class="container"> <div class="ct-navbarContainer"> <div class="navbar-header"> <a class="navbar-brand" href="index.html"><img id="ct-js-logo" src="assets/images/demo-content/logo.png" alt="FISHtank"></a> <!-- + --> </div> <ul class="nav navbar-nav"> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" href="about.html" role="button" aria-expanded="true"> Home <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> </div> </li> </ul> </li> <li><a href="contact.html">Contact Us</a></li> </ul> <ul class="nav navbar-nav yamm ct-navbar--right"> <li><a href="login.html">My Account</a></li> </ul> </div> </div> </nav> |
In order to create mega menus read the documentation here:
Icons
We’ve included 360+ font icons.
Awesome Icons – http://fontawesome.io/icons/
HTML markup:
|
1 2 |
<!-- Awesome Icons --> <i class="fa fa-cog"></i> |
CSS Files & Structure
We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.
1. Snap.js
2. Top Container with Shadows
3. Flexslider
4. Owl Carousel
5. Section Headers
6. Image Overlay
7. Tabs
8. Products
9. Promo Section
10. Numbered Rows
11. Collections
12. Flip Containers
13. Team Members Boxes
14. Testimonials
15. Logo Slider
16. Lists
17. Tags
18. Popover
19. Footer
20. Icon Boxes
21. Media Boxes
22. Vertical Image Section
23. Slide In Sections
24. Portfolio Gallery Buttons
25. Photo Gallery
26. 404 Text
27. Blog
28. Counter Blocks
29. Graph Boxes
30. Progress Icons
31. Google Maps
32. One Pager
33. Twitter
34. Animations
35. Magnific Popup
Utilities
Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.
Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.
- {Theme} uses utilities for the following categories:
- Typography
- Display Types
- Paddings
- Margins
- Line height
- Borders
- Colors
- Transform
- Section elements