Move position of Box title?

  • I'm surprised no one (yet) has replied with a solution for this!

    I know of someone else who would like to know how to make the TITLE appear at the TOP of the BOX.


    I may be wrong, but it might require some CSS Code???:/

    Life’s a Bitch … have a 4um! - DJ

  • Code
    .box[data-box-identifier="com.woltlab.wcf.genericBox39"]>.boxTitle {
    position: relative;
    top: -150px;
    }

    Try this

    I just uploaded the Code you gave in Post #4 - and then made a box ( "text box" ).

    The Title of the text box still shows BELOW the photo assigned (uploaded) to the box. See attachment.




    BOX DATA INFO: This box is numbered 124 in my list of boxes, and the Box Type is: TEXT Box.

    Life’s a Bitch … have a 4um! - DJ

  • I just uploaded the Code you gave in Post #4 - and then made a box ( "text box" ).

    The Title of the text box still shows BELOW the photo assigned (uploaded) to the box. See attachment.

    BOX DATA INFO: This box is numbered 124 in my list of boxes, and the Box Type is: TEXT Box.

    You have to adapt the number of the data-box-identifier. Then the code marcbelgique posted should work. If your box has the data identifier 124 it need to be


    CSS
    .box[data-box-identifier="com.woltlab.wcf.genericBox124"]>.boxTitle {
    position: relative;
    top: -150px;
    }


    btw: CSS issues should be posted with a link to the page where you have the problem. That makes it a lot easier to help...

  • This code is a bit more complex, but it applies to all sidebar boxes with images. Additionally, it changes the visual appearance by using the order property, which tells the browser to display them in a different order. I have also adjusted the margins to have them look a bit more nicely.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • This code is a bit more complex, but it applies to all sidebar boxes with images. Additionally, it changes the visual appearance by using the order property, which tells the browser to display them in a different order. I have also adjusted the margins to have them look a bit more nicely.

    THANK YOU, Alexander Ebert!


    The CSS Code works perfectly.

    See the two Screen Shots I have attached to illustrate this Code change for my Forum Boxes.


         



    Thanks also to marcbelgique AND djblueprint

    for your replies to this Thread;


    As you can see, I chose Alexander Ebert's CSS Code because of it "completeness".


    DJ

    Life’s a Bitch … have a 4um! - DJ

    Edited 3 times, last by Ruff Seas: Had to re do this reply because I had placed the cursor in the wrong area ().

  • Ruff Seas

    Where did you put Alexander's code?

    In my news box I have the text for the news already, so I would imagine I put it under that?


    The CSS Code is to be added to "Styles".

    >ACP >Customization >Styles >Click on YOUR "styles list" >Click on: "Advanced Settings" Link >add CSS Code

    Life’s a Bitch … have a 4um! - DJ