Creating Oval/Ellipse Posts?

[Tumbleweed]

Dec 6, 2015 2:27:06 GMT -8 @womenonly said:

I was never requesting all oval or circular.
It would not work. Secondly, it would look ridiculous.

I do not know if it is called inner or outer.->Category's board description.
A discreet and tasteful oval design that would not require tons of your time.
I again refer both of us to that link.
Your last reply was helpful.
Thank you for your continued support.


I hope my screen shot helps.
I am zero artistic -drawing skills.
I do not know if it is called inner or outer.->Category's board description.

O.K. Thanks, we are getting somewhere.  I made some ovals around the descriptions on this test site. houseofglass.proboards.com/
These are real ovals and not the oblongy things on the site you linked to. If you want them more like the site you linked to, I can do that. You can of course style them with the colors you want.

I'm not really sure why you posted that second screen shot of the boards in your admin panel.

But anyway, look at the test site I posted and tell me what you want different or change or whatever. Oh and that original code you linked to at W3Schools, you can't put text in that so I'm just using css. But at least I think we are off to a start, I hope.

[Former Member]

Thank you for getting back to me.

I am glad that you knew I did not want the oblong.
1.Would it be possible to enlarge the size- a little?

Is it realistic to have the oval on general stuff and then 
2.show up on the test board?
General Stuff

3.No Title's board:Testing
Not the posting container's content.
Is it realistic to also have the oval show in this part of the same board?

[Tumbleweed]

Dec 6, 2015 12:52:42 GMT -8 @womenonly said:

Thank you for getting back to me.

I am glad that you knew I did not want the oblong.
1.Would it be possible to enlarge the size- a little?

Is it realistic to have the oval on general stuff and then 
2.show up on the test board?
General Stuff

3.No Title's board:Testing
Not the posting container's content.
Is it realistic to also have the oval show in this part of the same board?

I adjusted the size to be a tiny bit larger and I centered the oval so that looks a bit better  (http://houseofglass.proboards.com/ ) but when I give you the css I'll show you where you can change that yourself. It's pretty easy. As it is now, the oval shows up on the boards on the main page and on the sub boards when you click on a board.  So you want it to be behind the thread titles?


Here is a screen shot showing a sub board and then thread titles. I did a very shaky red drawing around where I assume you want the ovals to show up there. 

I'm pretty sure we can add the ovals there too.

[Former Member]

Tumbleweed:
Thank you so much.
You spent a lot of time doing me this favor.
I do like it.
I would like to see how it works on the proboards forum- I have in mind.
I do not want to post its link, because that would be advertising.
I will long onto this board later on.

[Tumbleweed]

Alrighty, @womenonly , are you ready to try this? 
Hope so. 

You are going to need to make two template changes in the board template. One is in the board list and the other in the thread list:

So go to: Admin > Themes> Layout Templates>Board and then click on the board list tab and find this line.....

<p class="description">$[board.description]</p>

....and replace it with this......

<div class="description"><div class="inner_des">$[board.description]</div></div>




Now click on the thread list tab and add the two lines in red and make sure you put them exactly where I have them:

<td class="main clickable" title="$[thread.short_content]">
<div class="outer"><div class="inner_des">
<table>
<tr>
<td>$[thread.icons]</td>
<td>
$[thread.labels]
<span class="link target">$[thread]</span>
{if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
</td>
</tr>
</table>
</div></div>
</td>

Now lastly, all you need to do is go to your style sheet: Admin > Themes> Advanced Styles & CSS> Style Sheet>  ....and add this to the very bottom of the style sheet:


/* ovals in boards and threads -making the ovals*/
.boards .main .description, .threads .outer{
margin:auto;
width:350px;
height: 110px;
background:#444444;
-moz-border-radius:50% 50%;
-webkit-border-radius: 50% 50%;
border-radius:50% 50%;
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #000000;
}
/* adjusting the text position in the ovals */
.boards .main .description .inner_des, .threads .inner_des{
position:relative;
top:24px;
padding: 0px 30px 0px 50px;
width:250px;
height:40px;
color:#bbbbbb;
}


As you can see, the first part which I bolded is making the actual oval. The margin is centering it, if you don't want it centered remove that line.  You can change the width and height but making it too wide will make it kind of pointy on the ends so you really need to increase the height as well if you change the width too much. Also there is the background color you want, border radius which makes it oval and I used a border to highlight the top and darken the bottom. You can change those colors or remove the border totally.

The next part is all about positioning your text inside the oval. Notice I have a width and height in there that is much smaller than the actual oval. That is so the text stays inside the oval. The top:24 pixels moves the text up and down. The padding keeps the left and right side of the text within the circle. 30px is the right and 50px is the left. I also added the color of the text in there as well so you can change the #bbbbbb to whatever you want.

Any questions, just ask and hopefully we can work out the problems.

[Former Member]

Tumbleweed:

Thank you for everything.

I have the code on my test site.
I need time to make a few changes and find my errors.
The text does not appear inside the oval shape.
I also need to change the background color.

I will review what I did-tomorrow.
I do not want to submit my link.
If you want to review where I put your code, I will pm with my url.

[Tumbleweed]

Dec 8, 2015 18:56:48 GMT -8 @womenonly said:

Tumbleweed:

Thank you for everything.

I have the code on my test site.
I need time to make a few changes and find my errors.
The text does not appear inside the oval shape.
I also need to change the background color.

I will review what I did-tomorrow.
I do not want to submit my link.
If you want to review where I put your code, I will pm with my url.

That's fine, no rush and if you can't find out how to fix things, feel free to pm me the link.

[Former Member]

Tumbleweed:

I am unable to figure out where I went wrong.
Isn't text supposed to show up inside of general stuff?

[Tumbleweed]

Dec 9, 2015 6:25:22 GMT -8 @womenonly said:

Tumbleweed:

I am unable to figure out where I went wrong.
Isn't text supposed to show up inside of general stuff?

I got your pm and info that you now have the text showing but it is overflowing outside the oval. This oval will not expand to accommodate your text because then it would start not being an oval. Your options are to make the ovals bigger, make your text smaller or keep your text more bunched together. All of your descriptions will need to be kept a certain length. 

If you want to make the ovals bigger just change the width and height in the css that makes the actual oval:

width:350px;
height: 110px;

And then you'll need to increase this a bit for the text part:

width:250px;
height:40px;

If you want to decrease the font-size you can add the bold to you css and change the 12px to 10px  or whatever:

.boards .main .description .inner_des, .threads .inner_des {
position: relative;
top: 24px;
padding: 0px 30px 0px 50px;
width: 250px;
height: 40px;
color: #008080;
font-size:12px;
}


Just like that site you linked to with their oblong-ish oval thing, you'll have to be careful about the amount of text you put inside your oval keeping each description relatively the same long. 

Hopefully, that will help you get things how you want.

[Former Member]

Tumbleweed:


I will remain keeping the ovals as they.
I hope I will not need to make them oblong.
I decreased my font size to 10.

Text  is not showing in my film category.
How do I get text to appear where it is supposed to appear?

[Former Member]

Dec 10, 2015 4:50:17 GMT -8 @womenonly said:

Tumbleweed:


I will remain keeping the ovals as they.
I hope I will not need to make them oblong.
I decreased my font size to 10.

Text  is not showing in my film category.
How do I get text to appear where it is supposed to appear?

I resolved the text not showing up.
I also re-worded some of my board descriptions.
I needed to make more changes in font sizes.

Other than that, I will hope that I am all set.

Tumbleweed, thank you.
Please feel free to offer your thoughts.

[Tumbleweed]

Dec 10, 2015 6:53:31 GMT -8 @womenonly said:

Dec 10, 2015 4:50:17 GMT -8 @womenonly said:

Tumbleweed:


I will remain keeping the ovals as they.
I hope I will not need to make them oblong.
I decreased my font size to 10.

Text  is not showing in my film category.
How do I get text to appear where it is supposed to appear?

I resolved the text not showing up.
I also re-worded some of my board descriptions.
I needed to make more changes in font sizes.

Other than that, I will hope that I am all set.

Tumbleweed, thank you.
Please feel free to offer your thoughts.

My only suggestion would be to maybe move the text up and over to the left just a tiny bit more so those longer ones aren't on the edge/off the edge. To move it up a bit adjust the 24 to maybe 20px or even 18px. Then to move the text over to the left a bit more adjust the padding and so 50px might be 54px. (You may want to then reduce the 30px in that padding so the move to the left has adequate room on the right.)


.boards .main .description .inner_des, .threads .inner_des {
position: relative;
top: 24px;
padding: 0px 30px 0px 50px;
width: 250px;
height: 40px;
color: #008080;
font-size:12px;
}

I think if you did those two things, your current text would probably fit within the oval except the one about Judaism. Maybe on that one put a dash or something between Judaism and Quoted Definition like:

Judaism ---- Quoted Definition
or
Quoted Definition of Judaism.....so it's all on one line making that whole quote fit.

Other than that, I think it looks fine and I like the color choices as the oval is subtle and seems to look just fine, which I was wondering how it would look since I thought it looked bad on my test site. Anyway, glad I could help even if it took us a bit to get on the same page.

[Former Member]

Tumbleweed:

My lack of coding knowledge and my knack for making errors led me to be make cautious changes.
padding: 0px 30px 0px 54px;
The gold was too bright.
I then went to beige.

Your code looks good.
Thank you.

[Former Member]

Here is how it looks on my proboards test site.
For my forums brief descriptions worked better.

[Former Member]

Dec 10, 2015 12:16:30 GMT -8 @womenonly said:

Here is how it looks on my proboards test site.
For my forums brief descriptions worked better.

Tumbleweed:
I pm you a little past 8:30 this evening.

Thank you for your continued help.