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.
CSS Files & Structure
1. variables
2. mixins
3. datepicker
4. fonts
5. sections
6. animate
7. utilities
8. motive
9. typography
10. menu
11. buttons
12. lists
13. iconbox
14. icon
15. skills
16. blockquote
17. pricing
18. table
19. cta
10. tooltip
21. accordion
22. tabs
23. footer
24. copyright
25. form
26. breadcrumbs
27. flexslider
28. magnificpopup
29. slider
30. testimonial
31. courselist
32. coursesgallery
33. dropdown
34. sidebarcolumn
35. badge
36. choiceviev
37. graph
38. team
39. newsletter
40. singlecourse
41. headersection
42. pagination
43. mediasections
44. memberpage
45. mainparallax
46. tweet
47. videowachers
48. teacherbox
49. blogcontent
50. singlearticle
51. comments
52. program
53. contactpage
54. loginpage
55. socialicons
56. videoarchive
57. portfolio
58. maps
59. intro-effects
60. snap
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
- Font Colors
- Borders
- Backgrounds Colors
- Font Sizes
- Triangles