styling question

Discussion in 'WoltLab Burning Board' started by bogie, Dec 27, 2016.

  1. bogie

    bogie Participant

    92
    13
    +39
    box's.PNG

    I notice somewhere in the template files is a box to give elements a CSS class, now i am a numpty at this sort sort of thing.........

    Does that mean I can give the box arrowed above, a name in the template and then colour or alter that box independently of the others?

    If so I assume this is true of 'other' box's?

    Any guidance on doing this is greatly appreciated.

    We have decided to open a couple of new sites, and convert most existing sites over to woltlab, so i am having to learn how to theme them etc :D. Not my strong point seeing as i am colour blind, and have all the style of a Bag lady.
     
  2. dtdesign

    dtdesign Developer

    569
    287
    +658
    I recommend that you play around with the developer tools of your browser (can be accessed with F12 on Windows by default), as they allow you to inspect the page and quickly identify parts.

    The box shown above is identified by the CSS selector

    .boxesSidebarRight .box[data-box-identifier="com.woltlab.wcf.SignedInAs"]

    You can use it to apply a custom background-color property or use any other CSS instructions.
     
  3. bogie

    bogie Participant

    92
    13
    +39
    Hi
    Yes thats how i have been doing it, but it changes the colour of all side box's, my question was can we easily separate the box's? in other words is there somewhere we can give each another CSS class name?
     
  4. dtdesign

    dtdesign Developer

    569
    287
    +658
    Code:
    .boxesSidebarRight .box[data-box-identifier="com.woltlab.wcf.SignedInAs"] {
        background-color: red;
    }
    This code applies the red background color only to the box marked in your screenshot above, all other boxes will not be affected. Other than that, you can edit the boxes through your ACP and set a custom CSS class name, there is a dedicated input field for this.
     
  5. bogie

    bogie Participant

    92
    13
    +39
    Thanks that didnt show in my browser.

    I wasnt sure if i had seen the set custom class name, thats the bit i am after thanks.
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.