Mini-Profile for Welcome PM 1.1.0

[Alan Vende]

I saw that when I created the account; it sadly didn't put in the HTML that I put into the PM, though; it only put <b></b> and <i></i>; it showed those instead of doing what I wanted it to. It also didn't like to the Admin account when I put the URL to the admin with the Link HTML.

I attempted to put that CSS into the sheet like you said on it's own line, but it said there was a Syntax error. What class or what have you should go with it?

[Brian]

Oct 28, 2014 11:51:33 GMT -8 Alan Vende said:

I saw that when I created the account; it sadly didn't put in the HTML that I put into the PM, though; it only put <b></b> and <i></i>; it showed those instead of doing what I wanted it to. It also didn't like to the Admin account when I put the URL to the admin with the Link HTML.

I attempted to put that CSS into the sheet like you said on it's own line, but it said there was a Syntax error. What class or what have you should go with it?

You're not supposed to add HTML to the style sheet. HTML goes in the plugin, while CSS goes in the style sheet.

[Alan Vende]

Right, but when I put in the .mini-welcome, it said there was a Syntax error; I tried to put the HTML into the actual PM. Am I just missing quotation marks around ".mini-welcome"? Like that?

[Brian]

Can you post what you're attempting to add?

[Alan Vende]

Oct 28, 2014 11:57:10 GMT -8 Brian said:

Can you post what you're attempting to add?

You said in your description to add the ".mini-welcome" to your CSS sheets, but when I did, it didn't work, as in the Screenshot



and

[Brian]

You only need that if you plan on adding CSS to customize the appearance of the mini-profile, like changing its background color.

.mini-welcome {
    background-color: #FFFFFF;
}

Otherwise you don't need it at all.

[Alan Vende]

So if you put CSS in the area where you have it in the Plugin, we don't need to have that coding? Or is that the only reason we would need it? Like you had border: dotted in the CSS.

[Brian]

You can do that, but the section in the plugin only targets the .mini-welcome element. If you wanted to target something inside of it you'd have to use the style sheet so you could do something such as target all links inside it with .mini-welcome a among other miscellaneous CSS.

[Alan Vende]

Thank you!!

[Former Member]

Hello Brian

This is probably completely wrong but here we go lol

I have added the below code to the top of the plugins HTML

<div class="group-tag">Forum Staff</div>

And i have added the below in to the stylesheet

.mini-welcome.group-tag {font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
background-color: #111;
box-shadow: 0px 0px 2px #000;
background-image: url(http://images.proboards.com/v5/gradients/sexy.png);
color: #fff;
text-shadow: 2px 2px 2px #000;
border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
padding: 3px 6px;
position: absolute;
top: 0px;
right: 0px;
}

But it doesn't seem to work .. Ive also tried changing to #group-tag and no luck

Please are you able to advise where i'm going wrong?

Thanks
Dave

[Brian]

Hi, Dave B.

.mini-welcome.group-tag tells your CSS that it's looking for an element containing both the .mini-welcome class and the .group-tag class because there's no space between the classes in your selector. So it would match an element that looks like this:

<div class="mini-welcome group-tag">

But based on what you've described the element you added is a descendant of the .mini-welcome element so you probably want to use this as your CSS selector:

.mini-welcome .group-tag

Which would match the element colored red below:

<div class="mini-welcome">
    <div class="group-tag"></div>
</div>

[Former Member]

Feb 3, 2020 17:11:18 GMT -8 Brian said:

Hi, Dave B .

.mini-welcome.group-tag tells your CSS that it's looking for an element containing both the .mini-welcome class and the .group-tag class because there's no space between the classes in your selector. So it would match an element that looks like this:

<div class="mini-welcome group-tag">

But based on what you've described the element you added is a descendant of the .mini-welcome element so you probably want to use this as your CSS selector:

.mini-welcome .group-tag

Which would match the element colored red below:

<div class="mini-welcome">
    <div class="group-tag"></div>
</div>

  Heyy Brian

  I think im still getting it wrong somewhere ..

  In the plugins HTML i have the below 

  <div class="group-tag">Forum Staff</div>

<center>

<a style="color: #f00;" href="/user/1">Dave</a><br />

<hr size="2" style="margin:1px" color= #000000 />



<img src="http://storage.proboards.com/6359216/i/IjOXnl18xpsPRnjq9wN_.png">

<hr size="2" style="margin:1px" color= #000000 />

<div style="margin: 20px auto; text-align: center;">

   <img src="http://storage.proboards.com/6359216/avatar/Ft7VkAWR9CNRCDUU0ySJ.jpg">

</div>

<hr size="2" style="margin:1px" color= #000000 />

<div>

   <ul style="list-style: inside disc none;">

       <li><a href="/conversation/new/1">Send me a PM</a></li>

       <li><a href="/thread/1/community-guidelines">Forum Rules</a></li>        

   </ul>

</div>

</center>


and in the CSS i now have as you mentioned above 

/*CSS for Welcome PM Mini Profile*/

.mini-welcome .group-tag {font-size: 10px;

font-weight: bold;

text-transform: uppercase;

text-align: center;

background-color: #111;

box-shadow: 0px 0px 2px #000;

background-image: url(http://images.proboards.com/v5/gradients/sexy.png);

color: #fff;

text-shadow: 2px 2px 2px #000;

border-radius: 0 0 0 10px;

-webkit-border-radius: 0 0 0 10px;

padding: 3px 6px;

position: absolute;

top: 0px;

right: 0px;

}



[Retread]

Feb 4, 2020 0:33:45 GMT -8 Dave B said:

I think im still getting it wrong somewhere ..

Hi Dave B

I added your html to the plugin on my test forum, and the style sheet modification to a stock proboards theme, and this is what I got:



This seems consistent with the CSS you wrote. Are you seeing something different than that, or were you trying to accomplish something else?

[Former Member]

Hey Retread

Yeah that forum staff text and backgroup should be positioned at the top right of the welcome PM mini profile

Cheers
Dave

[Retread]

If you want it to remain within the MP, position:absolute; will difficult to work with. There, your reference point is on the entire page. Probably better if you delete the last three lines of the styling.

The width of that div will normally be auto, so it will fill whatever width that's available in the parent container. Maybe declare the width, and use margin-left:auto; to shift it to the right?