XenForo Artodia Dark Responsive style fine tuning

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.
CSS:
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.
CSS:
/* Make posts links bold*/
.externalLink {
font-weight:bold !important;
color:#deb8b9 !important;
}

.internalLink {
font-weight:bold !important;
color:#deb8b9 !important;
}

/* Don't show ugly white box when hovering links */
.externalLink:hover {
background-color: rgba(0,0,0,.0) !important;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
text-decoration: underline !important;
color:@secondaryLightest !important;
}

.internalLink:hover {
background-color: rgba(0,0,0,.0) !important;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
text-decoration: underline !important;
color:@secondaryLightest !important;
}

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:
Top