1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XenForo Artodia Dark Responsive style fine tuning

Discussion in 'Papers' started by Stéphane Lenclud, Mar 22, 2017.

  1. Stéphane Lenclud

    Stéphane Lenclud Founder Staff Member

    Here we describe final adjustments we made to that excellent Artodia Dark Responsive theme for XenForo.

    Colour adjustments

    Focused Form Control background and text colour were changed from yellowish and black to blue (@secondaryLightest) and white (@activeColor) respectively.

    Message User Generated Links text colour was changed from white to pinkish (#deb8b9).
    Message User Generated Links Hover background and text colour were changed from white and blue (@secondaryMedium) to none (@contentBackground) and a lighter blue (@secondaryLightest).
    Also we had to have the following additional CSS to remove the drop shadow from hovered links.
    Code (CSS):
    1. box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
    It is to be noted that similar changes were initially made in our EXTRA.CSS template has shown below. However those were reverted and applied to individual properties as explained above. I'm not quite clear as to which approach is the smartest when it comes to surviving updates.
    Code (CSS):
    1. /* Make posts links bold*/
    2. .externalLink {
    3. font-weight:bold !important;
    4. color:#deb8b9 !important;
    5. }
    6.  
    7. .internalLink {
    8. font-weight:bold !important;
    9. color:#deb8b9 !important;
    10. }
    11.  
    12. /* Don't show ugly white box when hovering links */
    13. .externalLink:hover {
    14. background-color: rgba(0,0,0,.0) !important;
    15. box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
    16. text-decoration: underline !important;
    17. color:@secondaryLightest !important;
    18. }
    19.  
    20. .internalLink:hover {
    21. background-color: rgba(0,0,0,.0) !important;
    22. box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
    23. text-decoration: underline !important;
    24. color:@secondaryLightest !important;
    25. }
    26.  

    Fluid layout with margin

    To keep a fluid layout while adding some margin to avoid over stretching you page content I find the best solution was to specify Right and Left margin in percentage in Style Property General Page Content Controller.

    upload_2017-4-6_13-38-2.png

    Style Properties: Header and Navigation

    Logo properties and navigations options were adjusted:
    upload_2017-4-6_15-28-1.png

    Style Properties: Message Layout

    Poster information was move to the right hand side.
    upload_2017-4-6_15-30-18.png
     
    Last edited: Apr 14, 2017

Share This Page