News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

User Info Box Help?

Started by Shades., February 01, 2022, 08:05:52 PM

Previous topic - Next topic

Shades.

How do I separate and change colors of the user box to the left of my post? When I click on inspect it shows it as one big box around the user box and the post box.



Tried to upload a screenshot but getting:

userbox.GIF <html> <head><title>500 Internal Server Error</title></head> <body> <center><h1>500 Internal Server Error</h1></center> <hr><center>nginx</center> </body> </html> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> 0.1 MB
CANCEL
The current total attachment size allowed per post is 8192 KB. The total amount of the selected files is 709 KB.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

TwitchisMental

Quote from: Shades. on February 01, 2022, 08:05:52 PMHow do I separate and change colors of the user box to the left of my post? When I click on inspect it shows it as one big box around the user box and the post box.



Tried to upload a screenshot but getting:

userbox.GIF <html> <head><title>500 Internal Server Error</title></head> <body> <center><h1>500 Internal Server Error</h1></center> <hr><center>nginx</center> </body> </html> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> <!-- a padding to disable MSIE and Chrome friendly error page --> 0.1 MB
CANCEL
The current total attachment size allowed per post is 8192 KB. The total amount of the selected files is 709 KB.

There are quite a few classes in the user panel to the left of the post.

.poster is the overall wrapper or holder for the content.

The Username is just in some <h4></h4> tags.

Then you have the ul which has the class of .user_info.

Then you have a class for just about everything from the avatars to the location within that ul.

Shades.

ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Aleksi "Lex" Kilpinen

Sort of off topic, the upload issues should be fixed and you should be able to attach files again.
Slava
Ukraini!


"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

pulgoki

Quote from: Shades. on February 02, 2022, 10:43:38 PMSounds complicated! :o

It's not that complicated depending on what you're expecting to see?

I just added this to the end of the index.css (don't take my advise as I don't know what I'm doing :D probably better to have this verified by someone)

.poster {
    background-color: royalblue;
    border-radius: 5px;
}

Obviously the color is hideous.  :D 




Shades.

Quote from: pulgoki on February 03, 2022, 10:56:19 AMIt's not that complicated depending on what you're expecting to see?

I just added this to the end of the index.css (don't take my advise as I don't know what I'm doing :D probably better to have this verified by someone)

.poster {
    background-color: royalblue;
    border-radius: 5px;
}

Obviously the color is hideous.  :D 

Thats great! I was playing around with it and now I'm trying to figure out how to make the height the same as the post box so if the post box gets bigger then so would the .poster box. I couldn't figure out how to get 100% to work so for now I just set it like this:

Quote.poster {
    background-color: #222;
    border-radius: 5px;
    height: 40em;
}
I don't know how to set the height!?

I need it to fill this space (see attachment)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

That would require fairly more work, or using grid:

#forumposts .windowbg {
padding: 0;
}
#forumposts .post_wrapper {
display: grid;
grid-template-columns: 175px 1fr;
}
#forumposts .poster {
grid-row-start: 1;
grid-row-end: 5;
padding: 10px 7px;
width: 175px;
}
#forumposts .postarea {
padding: 10px 0;
}
#forumposts .postarea,
#forumposts .moderatorbar {
margin-left: 0;
padding-left: 15px;
}

I did something similar in my custom theme

SMF Tricks - Free & Premium Responsive Themes for SMF.

Shades.

I'm not able to figure out the height yet but I was able to add some borders and a box-shadow effect: (see attachment).

I used this: (Thanks @pulgoki for for showing me the first half of the code below) ;)

.poster {
    background-color: #222;
    border-radius: 5px;
    border-right: 1px solid #ff9000;
    border-bottom: 1px solid #ff9000;
    box-shadow: 0 2px 0 #ff9000;
}

If anybody can help me with the height issue I'd appreciate it!

Quote from: Diego Andrés on February 03, 2022, 01:28:53 PMThat would require fairly more work, or using grid:

#forumposts .windowbg {
padding: 0;
}
#forumposts .post_wrapper {
display: grid;
grid-template-columns: 175px 1fr;
}
#forumposts .poster {
grid-row-start: 1;
grid-row-end: 5;
padding: 10px 7px;
width: 175px;
}
#forumposts .postarea {
padding: 10px 0;
}
#forumposts .postarea,
#forumposts .moderatorbar {
margin-left: 0;
padding-left: 15px;
}

I did something similar in my custom theme
Thanks, I'm playing around with that too but I think I have what I need all except for the height issue now. ???  ;)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

Quote from: Shades. on February 03, 2022, 02:27:23 PMThanks, I'm playing around with that too but I think I have what I need all except for the height issue now. ???  ;)

That's what my post referred to.
Can be done in different ways, grid is one of them. Otherwise the height will not match the container.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Shades.

Quote from: Diego Andrés on February 03, 2022, 02:37:06 PM
Quote from: Shades. on February 03, 2022, 02:27:23 PMThanks, I'm playing around with that too but I think I have what I need all except for the height issue now. ???  ;)

That's what my post referred to.
Can be done in different ways, grid is one of them. Otherwise the height will not match the container.
Oh ok! I'm not familiar with the grid part but I will read up and experiment! ;)

Learning is fun sometimes but it's making my brain hurt! ???  :laugh:
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

Quote from: Diego Andrés on February 03, 2022, 02:37:06 PM
Quote from: Shades. on February 03, 2022, 02:27:23 PMThanks, I'm playing around with that too but I think I have what I need all except for the height issue now. ???  ;)

That's what my post referred to.
Can be done in different ways, grid is one of them. Otherwise the height will not match the container.
Oh wait...now I see! I didn't see it working the first time I tried it (cached I guess)

This way does look clean too! 8)

So I just added your code to the bottom of index.css and then under .poster { I added:

Quotebackground-color: #222;
   border-radius: 5px;
   border-right: 1px solid #555;
   border-bottom: 1px solid #555;
modified from pulgoki's post.

Thanks everyone for the help I think I've got what I needed! 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

Don't forget to revert for mobile

@media (max-width: 720px)
{
#forumposts .post_wrapper {
grid-template-columns: 1fr;
}
#forumposts .poster {
width: 100%;
}
#forumposts .postarea,
#forumposts .moderatorbar {
padding: 5px 10px;
}
}

SMF Tricks - Free & Premium Responsive Themes for SMF.

Shades.

Uhm...does that go in index or responsive?
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

Wherever, you can put it in responsive.css just to keep that in one place.

/* We have shared things... */
@media screen and (max-width: 720px) {

and then below
#forumposts .post_wrapper {
grid-template-columns: 1fr;
}
#forumposts .poster {
width: 100%;
}
#forumposts .postarea,
#forumposts .moderatorbar {
padding: 5px 10px;
}

SMF Tricks - Free & Premium Responsive Themes for SMF.

Shades.

Oh man thank you cause I forgot all about mobile! :)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

Quote from: Diego Andrés on February 03, 2022, 03:26:49 PMWherever, you can put it in responsive.css just to keep that in one place.

/* We have shared things... */
@media screen and (max-width: 720px) {

and then below
    #forumposts .post_wrapper {
        grid-template-columns: 1fr;
    }
    #forumposts .poster {
        width: 100%;
    }
    #forumposts .postarea,
    #forumposts .moderatorbar {
        padding: 5px 10px;
    }
@Diego Andrés For some reason this code has my header looking funny in mobile.

With code in resposive.css
You cannot view this attachment.

Without code in resposive.css
You cannot view this attachment.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

Shouldn't affect it at all.
Make sure you adjusted it accordingly with any new changes?

SMF Tricks - Free & Premium Responsive Themes for SMF.

Shades.

I couldn't find what was causing it but I fixed it by reworking a fresh index.css. Thanks! 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

Yes sorry I was on the phone at that time, I meant the css changes from RC4 to Final, could've caused issues :P

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: