AVForums moves to Xenforo

Sorry, but this is extremely customised to our needs, so wouldn't be appropriate for any other website and it's not something either us or our developer would have time to support.
 
For anyone interested, we tweaked the styling to put a unique background colour on each of our categories.
www.avforums.com/forums/
It's actually a very simple bit of code. It would normally go in the EXTRA.css. I added comments which you should probably remove.

First of all I set up the css common to all the categories:
Code:
/* ------------------------------------------------------------------------------------- */
/* Category strip pseudo background properties common to all */
.nodeList .categoryStrip:before, .node295 .titleBar:before, .node495 .titleBar:before, .node516 .titleBar:before, .node517 .titleBar:before, .node290 .titleBar:before, .node242 .titleBar:before, .node297 .titleBar:before, .node118 .titleBar:before, .node210 .titleBar:before, .node370 .titleBar:before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    z-index: -1;
    opacity: 0.15;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
}
.titleBar h1 em {
    color: @textCtrlBackground;
}


I set up the colour for movies in the color palette - avfMovies and created a slightly lighter and darker version for highlighting. There is a block like this one below for each category. The css changes the colours of all the major elements on the page to match the category colour.
I found that I had to tweak the position and rotation of the icon used in titleBar:before to suit each icon.

Code:
/*  css to style the M O V I E S group of forums */
.catImage516 {  // the node id for the category
    background-image: url('@imagePath/avforums/icon_movies.svg');   // we have a specific 32x32 icon
    float: left;
    width: 32px;
    height: 32px;
    margin: 10px 0 10px 10px;
}
.node516 .titleBar {
background-color: @avfMovies;    // sets the background colour of the title bar everywhere in the category
color: @textCtrlBackground;
    overflow: hidden;
    padding: 5px 0 0 15px;
    position: relative;
    z-index: 0;
}
#catStrip516 {
background-color :@avfMovies;
}
#catStrip516:before, .node516 .titleBar:before {  // adds the 'background' icon to the titlebar
    top: -30px;
    right: 30px;
    background: url(@imagePath/avforums/icon_movies.svg) no-repeat scroll right center / 130px 130px rgba(0, 0, 0, 0);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
.node516 .PageNav a.currentPage {    // makes the highlighted page in the pagenav the category colour
    background-color: @avfMoviesLighter;
    border-color: @avfMovies;
}

/* the next bit colours the thread list headers and the buttons */

.node516 a.callToAction span, .node516 .xenOverlay .formOverlay .heading, .node516 .message .newIndicator, .node516 .discussionList .sectionHeaders, .node516 .button.primary {
    background-color: @avfMovies;  
}
.node516 a.callToAction:hover span, .node516 .discussionList .sectionHeaders dd a[href]:hover, .node516 .button:hover, .node516 .button[href]:hover, .node516 .buttonProxy:hover .button { 
    background-color: @avfMoviesDarker;
}
Maybe someone with better css skills than me can improve this.
 
Last edited:
AVFORUMS IS USING ONE OF MY MODIFICATIONS!!!! I FEEL SO HONORED :eek: :notworthy:

http://xenforo.com/community/resources/fontawesome-icons-in-visitor-tab-account-wrapper.1861/

xbn7IVR.png


:cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool:
 
Last edited:
I made some tweaks though Matthew. The icon tag doesn't work and some of the font awesome elements have changed. E.g. fa-fixed-width is now fa-fw.
And I added a class to display: none the icons in the responsive design.
And I think the envelope is a better icon for the inbox than the inbox icon :)
Thanks for the addon.
 
Top Bottom