Looking for a certain code

[Miranda]

As the subjects says I am looking for a certain code don't know what it's called and it doesn't go in headers or footers so this may not even be the correct place to ask this.

Looking for a code that does something like the below image. If this isn't the right spot to ask I am really sorry just thought maybe it was a code question this would be the best spot. Thanks for your time.

[Tumbleweed]

This is for a V5 forum, correct? Is this for in a post then since you said it doesn't go in the headers/footers? To me it looks like a posting table that uses html and css to make that, which I (or someone else) could do for you, but we just need the above two questions answered.

 

[Miranda]

Thank you for answering. Yes it is for a v5 and would like to place it in the side bar I have if it is possible.

[Tumbleweed]

Which side bar plug-in are you using so I can test this and make sure all is well?  Meanwhile, I'll see what I can do. This will be a lot easier than doing it for a post.

[Miranda]

I am using the Sidebar Redux by Brian Ordonez. Glad it would be easier would love to take a stab at coding but it looks a little complicated to me so will leave it to the professionals

[Tumbleweed]

I assumed the gray squares are where an image would go, correct? I gave you the coding for the first two sections. The first one with the image on the left and the second one with the image on the right. You can just copy and paste that section to get your other ones. (I put a comment in so you know where to start to copy and where to stop copying and where to paste it, which would be right below where you stopped copying.)

The easiest way to do this is just to go to your Admin > Plugins > Manage and click on your Sidebar Redux Settings to edit it. Then in the left or right tab where you add your content you can put this: (Easiest for you to just add the css there, it works fine that way.)



<style type="text/css">
#my_side_border{
width:240px;
background-color:white;
padding:4px;
}
#my_content{
text-align: justify;
font-size: 10px;
}
#my_side_border hr{
width: 140px;
color: blue;
padding:0px;
margin:0px;
}
#image_left{
width: 50px;
height: 50px;
float:left;
border: 4px solid #666666;
margin: 4px;
}
#image_right{
float:right;
width: 50px;
height: 50px;
border: 4px solid #666666;
margin: 4px;
}
#my_topL_title{
font-size: 12px;
color: #880000;
text-align: right;
padding-right: 16px;
}
#my_botL_title{
font-size: 12px;
color: #880000;
text-align: center;
}
#my_topR_title{
font-size: 12px;
color: #880000;
padding-right: 30px;
}
#my_botR_title{
font-size: 12px;
color: #880000;
text-align: center;
}
</style>

<center>
<div id="my_side_border">
<!--copy from below this line to add more-->

<!--First section with image on left-->
<img id="image_left" src="http://myimage.png" />
<div id="my_topL_title">Name Here</div>
<hr>
<div id="my_botL_title">Title</div>
<div id="my_content">

Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.<br />
<br />
<br />

<!--Second section with image on right-->
<img id="image_right" src="http://myimage.png" />

<div id="my_topR_title">Name Here</div>
<hr>
<div id="my_botR_title">Title</div>
<div id="my_content">
Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic! </div>
<!--End of what to copy-->


<!--paste more above this last div-->
</div>
</center>




Since you didn't provide a link to your site, I have no idea what width you set your side bar so I just assumed the common 200px was your width and then set this code to fit within that at 180px. Let me know if you have difficulties because if you have your side tables wider, you may have an issue with moving the "Name" and "Title" part.

[Miranda]

Oh i'm sorry thought i did put a link
Here you go 

Really grateful that you did this the sidebars 265 width and don't want to mess with the code or else might break it some how.

Thank you so much

[Tumbleweed]

Miranda,

I edited my previous post to reflect the width you are using and tweaked the "Name" so they sit where the horizontal rule ends. Let me know if you need help. Are you o.k. with editing the css?

[Miranda]

I am usually ok with editing things once I know how it works. Could you tell me how big those boxes are in pixels by any chance? Don't want to over make them and stretch it out.

[Tumbleweed]

Looks like you figured out where to edit the image size. If you do need any help, just ask. Have fun with your site!

[Miranda]

I did. Thank you again for making it.

One last question, how can I change font on the Title and name? I am trying the <font face=Orator Std>Male Of The Month</font> but it looks more like georgia then what i have put

[Tumbleweed]

You'll just add it to the css titles:

#my_topL_title{
font-size: 12px;
color: #880000;
text-align: right;
padding-right: 16px;
font-family: Orator Std;
}

Keep in mind most people don't have that font on their computer (I know I don't.) so I think I'm getting georgia as well. You'd be better off finding a font through google:

www.google.com/fonts/

They have a quick use little icon where if you click it, it will give you a link to the library for that font and then below that, how to put it in your css. Here's an example of the link to the library:
<link href='http://fonts.googleapis.com/css?family=Purple+Purse' rel='stylesheet' type='text/css'>

And then using that in the css:

#my_topL_title{
font-size: 16px;
color: #880000;
text-align: right;
padding-right: 16px;
font-family: 'Purple Purse', cursive;
}

If you really want to use that font you mentioned then put a second option for those who don't have it on their computer. A list of common fonts:

www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Then you'd do:

font-family:"Orator Std",Courier New;

[Miranda]

I have the google font code on my site. So I can use any font on that and it will show up on the site even if the person has it or not?

[Tumbleweed]

If you mean the plug-in for that, yes, any google font should show, although I have not tested that particular plug-in, but I assume it works as expected.

[Miranda]

I didn't use a plug in I did this a template thing. Should I use the plug in instead?