New design resource: styling elements in LightCMS

LightCMS automatically provides default styles for content elements through its built-in CSS file.  However, there are times you might want to take the styling of the elements a step further and put some extra, custom polish on your sites.  Although you have always been able to view the CSS with developer plugins such as Firebug, we thought it would be helpful to create a reference guide that shows our default element styling. So, we did, and you can view it on our account support site at http://accountsupport.publishpath.com/styling-elements

The reference guide breaks things down by element and shows you all of the default CSS statements included for that element. This allows you to spot the statements you might want to override with your own CSS. The following is an example entry from the reference guide on the Blog element’s “list view.” The top image shows a blog list view entry and the statements below show the CSS that is applied to it. This is just a sample. You can see all of the entries in the reference guide.

style elements in cms

  1. /* blog listing */
  2. .blogList {
  3. padding: 0;
  4. }
  5. .blogList ul {
  6. margin: 0 !important;
  7. padding: 0 !important;
  8. list-style: none;
  9. list-style-image: none;
  10. }
  11. .blogList ul li {
  12. list-style: none;
  13. list-style-image: none;
  14. margin: 0 !important;
  15. padding: 0 0 5px !important;
  16. }
  17. .blogList ul li h2.postTitle {
  18. font-size: 25px;
  19. font-family: georgia, serif;
  20. line-height: 1;
  21. margin: 0 0 5px;
  22. font-weight: normal;
  23. }
  24. .blogList ul li h2.postTitle a {
  25. color: #000;
  26. text-decoration: none;
  27. }
  28. .blogList ul li .postBody {
  29. font-size: 12px;
  30. }
  31. .blogList ul li .postInfo {
  32. margin: 0 0 15px;
  33. color: #777;
  34. }
  35. .blogList ul li .postInfo span.postDate {
  36. color: #777;
  37. }

No comments (Add your own)

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

  • Takes less than 60 seconds
  • No commitment
  • No payment information required
  • 14-day Free Trial with Full Access
  • Sign Up in Less than 30 Seconds
  • No Payment Information Required
Get Started Today with a free 14-day trial