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 |
<nav class="navbar ct-navbar--transparent ct-navbar--logoright" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="index.html"><img src="./assets/images/logo.png" alt="Orlando Logo"> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm"> <li class="dropdown yamm-fw active"> <a href="index.html">Home <i class="fa fa-angle-double-down"></i></a> <ul class="dropdown-menu"> </ul> </div> <!-- /.navbar-collapse --> <div class="ct-navbar-search"> <form role="form"> <div class="form-group"> <input type="text" class="form-control" placeholder="Please type keywords..." required> </div> <button class="ct-navbar-search-button" type="submit"> <i class="fa fa-search fa-fw"></i> </button> </form> </div> </div> <!-- /.container --> </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> |
Appearing with Animation when element in viewport
Animation can be turn off just be remove “withAnimation” class from body.
Usage:
– add “animated” class to element and data-fx=”animation-type”. That’s it.
Available animation : http://daneden.github.io/animate.css/
- data-fx=”hinge”
- data-fx=”bounce”
- data-fx=”flash”
- data-fx=”pulse”
- data-fx=”shake”
- data-fx=”swing”
- data-fx=”tada”
- data-fx=”wobble”
- data-fx=”bounceIn”
- data-fx=”bounceInDown”
- data-fx=”bounceInLeft”
- data-fx=”bounceInRight”
- data-fx=”bounceInUp”
- data-fx=”bounceOut”
- data-fx=”bounceOutDown”
- data-fx=”bounceOutLeft”
- data-fx=”bounceOutRight”
- data-fx=”bounceOutUp”
- data-fx=”fadeIn”
- data-fx=”fadeInDown”
- data-fx=”fadeInDownBig”
- data-fx=”fadeInLeft”
- data-fx=”fadeInLeftBig”
- data-fx=”fadeInRight”
- data-fx=”fadeInRightBig”
- data-fx=”fadeInUp”
- data-fx=”fadeInUpBig”
- data-fx=”fadeOut”
- data-fx=”fadeOutDown”
- data-fx=”fadeOutDownBig”
- data-fx=”fadeOutLeft”
- data-fx=”fadeOutLeftBig”
- data-fx=”fadeOutRight”
- data-fx=”fadeOutRightBig”
- data-fx=”fadeOutUp”
- data-fx=”fadeOutUpBig”
- data-fx=”flip”
- data-fx=”flipInX”
- data-fx=”flipInY”
- data-fx=”flipOutX”
- data-fx=”flipOutY”
- data-fx=”lightSpeedIn”
- data-fx=”lightSpeedOut”
- data-fx=”rotateIn”
- data-fx=”rotateInDownLeft”
- data-fx=”rotateInDownRight”
- data-fx=”rotateInUpLeft”
- data-fx=”rotateInUpRight”
- data-fx=”rotateOut”
- data-fx=”rotateOutDownLeft”
- data-fx=”rotateOutDownRight”
- data-fx=”rotateOutUpLeft”
- data-fx=”rotateOutUpRight”
- data-fx=”slideInDown”
- data-fx=”slideInLeft”
- data-fx=”slideInRight”
- data-fx=”slideOutLeft”
- data-fx=”slideOutRight”
- data-fx=”slideOutUp”
- data-fx=”rollIn”
- data-fx=”rollOut”
CSS Files & Structure
We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.
1.A. Google Fonts
1.B. Revolution Slider styles
1.C. Magnific popup styles
1.D. Font Awesome styles
1.E Yamm styles
1.F Flexslider styles
1.G Animate css styles
2. GENERAL STYLES
3. Typography
4. Buttons
5. Pagination
6. Alerts
7. Inputs
8. Pophover
9. Header styles
10. Navbar styles
11. Call to action
12. Sections
13. Media sections – video/parallax/kenburns
14. Process circles
15. Person box
16. Service box
17. Pre footer section
18. Footer
19. Articles
20. Counters
21. Blockquote
22. Tabs
23. Images widget
24. Project single
25. Project images
26. Lists
27. Pricing box
28. Accordion
29. Socials
30. Square icons
31. Charts
32. Progress bar
33. Twitter
34. Google map
35. Flexslider
36. Revslider
37. Time circle counter
38. Thumbnail scroller
39. Magnific popup
40. Isotope
41. Helpers
42. D3 swimmers
43. WordPress
44. Media queries, adjustments
45. Motive colors
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
- Colors
- Borders
- Background Colors
- Triangles
- Diagonals
- Shadows