Is there anyone familiar with making proboard themes? (Mini Profile, in particular)

[Icewolf 258]

I am trying to edit the colours of the mini-profile (among other things on the skin, but I'm going to concentrate on this for now.) The problem? I'm not familiar at all with the use of these kind of tags in it - @mini_personal_text_color etc) as they don't appear to be like the ordinary css codes and I have no idea at all what you're supposed to do with them to change them. This is probably a good example of the sort of code that's there:

 

.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; height: 550px; width: 300px; }
.mini-profile .personal-text { color: @mini_personal_text_color; display: block; font: @mini_personal_text_font; text-align: @mini_personal_text_align; }
.mini-profile .info { color: @mini_info_text_color; font: @mini_info_text_font; text-align: @mini_info_text_align; }
div.mini-profile a { color: @mini_links_color; font: @mini_links_font; text-decoration: @mini_links_decoration; }
.even .mini-profile { color: @mini_even_text_color; font: @mini_even_text_font; background: @mini_even_background; border: @mini_even_border; .rounded-corners(@mini_even_border_radius); text-align: @mini_even_text_align; }
.even .mini-profile .personal-text { color: @mini_even_personal_text_color; font: @mini_even_personal_text_font; text-align: @mini_even_personal_text_align; }
.even .mini-profile .info { color: @mini_even_info_text_color; font: @mini_even_info_text_font; text-align: @mini_even_info_text_align; }
.even div.mini-profile a { color: @mini_even_links_color; font: @mini_even_links_font; text-decoration: @mini_even_links_decoration; }
.warning-bar { background: @mini_warning_background; border: @mini_warning_border; .rounded-corners(@mini_warning_border_radius); padding-bottom: 2px; height: 14px; line-height: 100%; text-align: @mini_warning_text_align; min-width: 40px !important; }
.warning-bar .number { color: @mini_warning_number_text_color; font: @mini_warning_number_text_font; text-decoration: @mini_warning_number_text_decoration; background-color: @mini_warning_number_background_color; .rounded-corners(@mini_warning_number_border_radius); opacity: 0.5; font-size: 0.6em; margin-right: 1px; padding: 0px 2px 1px 2px; }

I've managed to get a style for a <h4> tag in there, but that's about it. What I want to do is change the font for the user name, but can't get the <h4> tag to work on it, change the style on the group field underneath it and change the font styles on the posts and member is online/offline fields.

 

http://legends-of-arda.boards.net/thread/87/guide-races-men-free-peoples?page=1&scrollTo=143

 

[Sammiie 40]

@IcewolfThose tags are a short form way of linking code to a specific set of styling. Usually above a block of code, there's something that looks like this:

 

@container_background_color_1: #181818;
@container_text_color_1: #e3e3e3;
@container_background_color_2: transparent;
@container_text_color_2: #e3e3e3;
@container_links_color: #8D2B3C;
@container_highlight_color: @empty;
@container_outer_border_color: #000000;
@container_inner_border_color: #222222;

 

Throughout my board's CSS, many classes (the things that look like ".wordhere") will utilize these stylings for different things. The short form way Proboards uses this is instead of inputting the text color "#e3e3e3" everytime in different classes, you just change the above to something, say white for example. All the classes using "@container_text_color_1" styling will change to white, instead of you having to go in and find them all and change them all individually. 

 

For those not familiar with skinning or coding, this way is probably much easier to edit. If you wanted to change something, you'd just CTRL+F and search "@container_background_color" for example, and you'll be able to find the original and edit it. Though, of course, there's downsides to this: changing one of these would change everything using that code input. So, if you wanted to change something specific and only that specific thing, this wouldn't work for you. But for the sake of simplicity, this is Proboards way of trying to make things easier for you and others like you who aren't code savvy. 

 

So, in order to edit your colors for your mini-profile, you need to either find the area where it lists all the "@mini" classes and adjust the "color" ones to the styling you want them to be, OR you can just change the "color" styling to the hex codes you want them to be there.

 

As for changing the font to your Mini-Profile usernames, rely less on the fact that it uses <h4> tags, and more on the actual class name of the object you want to change:

 

.even div.mini-profile a {    color: #f6e7a9;  font: 22px normal Georgia, serif;  } 

 

I removed the "large" because that was what was keeping the font size from being customized. Once that was removed and the "22px" was added (for example), you are now able to customize the size of your text!

 

 

If you use Chrome, a simple way to find out the CSS classes for certain things is to right-click on the object you want to find out -- for example, the MiniProfile Title Name. Right-click that, a code box will pop up at the bottom and on the right, the first CSS cluster is usually the one you've clicked on. Even if you use it to just find the classes, that's ok. Alright on the right in the CSS-looking box would be the class names you need. Once you've got the class names, copy them, and search for them in your site's CSS file and make your necessary changes. If you find more @classes, you can always just input good old hexes and get rid of those if you find it too difficult to edit or keep track of!

Edited March 10, 2019 by SavagexTomato