Dynamically Tabbed Table: Link CSS?

[Loki Laufeyson]

I apologize if my explanations are terrible; I'm still feeling out how to get CSS working properly, so when it comes to the terminology for matters I'm afraid I'm not very savvy.

My issue, mainly, is finding a way to make my links look a little cleaner in the Dynamically Tabbed Table at the top of my forum, located here. Which I believe would be custom CSS webkit inside the table maybe?

Basically I'm looking to have the links have a background area and sidebar, that eases in when hovered over. I'm probably explaining myself horridly. This site is a good example of what I mean; the yellow side bar eases in when hovered over and the link itself is on a slightly lighter shade of grey than the site's background. I only want this in the dynamic table section though so I don't think it would go into Style Sheets upon reflection but into the plug in code. I hope Im making sense D:

[Brian]

Hi, Loki Laufeyson.

Were you looking to do the same thing as they did to the side menu in your tabbed table or somewhere else?

[Loki Laufeyson]

I was looking to get the static side of the side table to have our links similiar to how they have theirs done, yes! Pardon my late reply, I'm doing this at work. Because Im a responsible adult, clearly.

[Brian]

I'm doing this at work, too! Well... except this is my job.

All you would need to do is surround each of the links inside a div with a class. For example:

<div class="sidelinksdtt">
<a href="/thread/5144">About Us</a>
<br>
<a href="/thread/5110/code-conduct">Rules</a>
<br>
<a href="/thread/5109/site-plotline">Plotline</a>
<br>
<a href="/board/9/canon-lists">Canon Lists</a>
<br>
<a href="/board/132/wanted-ads">Wanted Ads</a>
<br>
<a href="/thread/5114/application-form">Application Form</a>
</div>

Then you would add CSS that affects only links within that div's class to the bottom of Themes > Advanced Styles & CSS > Style Sheet. You can customize this CSS however you want, but here's an example that should work.

.sidelinksdtt > a { background-color: #000; padding: 4px; border-left: 2px solid #333; }
.sidelinksdtt > a:hover { background-color: #111; padding: 4px; border-left: 6px solid #cc5; }

[Loki Laufeyson]

Oh my goodness. Thank you so much! This is perfect! I can tweak it from this now; you're awesome!

[Brian]

Glad you're satisfied with it. Have fun!

[Welshling]

Brian okies me again, pestering you and thanks Loki for the update

xlovesucksx.proboards.com/ is where i decided to use this piece of coding, but as you can see the divs around each link in your Redux sidebar, are all squished together. the css parts i have edited a little as you can see, but not sure how to separate them. What am i forgetting?

.sidelinksdtt > a { background-color: #141414; padding: 4px; border: 2px solid #333; border-radius:3px; line-height:80%; }
.sidelinksdtt > a:hover { background-color: #080000; padding: 4px; border-left: 6px solid #330000; line-height:80%;}

EDIT: I've removed the line height, but the buttons are still crumpled together.
EDIT: #2 I added in more line breaks, but would rather a single div background around all the links then the hover over each link please?

[Brian]

Jun 14, 2013 0:52:03 GMT -8 Welshling said:

Brian okies me again, pestering you and thanks Loki for the update

xlovesucksx.proboards.com/ is where i decided to use this piece of coding, but as you can see the divs around each link in your Redux sidebar, are all squished together. the css parts i have edited a little as you can see, but not sure how to separate them. What am i forgetting?

.sidelinksdtt > a { background-color: #141414; padding: 4px; border: 2px solid #333; border-radius:3px; line-height:80%; }
.sidelinksdtt > a:hover { background-color: #080000; padding: 4px; border-left: 6px solid #330000; line-height:80%;}

EDIT: I've removed the line height, but the buttons are still crumpled together.
EDIT: #2 I added in more line breaks, but would rather a single div background around all the links then the hover over each link please?

Not sure why you have a height specified in your current CSS for these links, but you should remove it.

Remove the part in red, and add the part in green.

.sidelinksdtt > a { background-color: transparent; width: 200px; height:300px; padding: 2px; border-radius: 3px; display: inline-block; }

[Welshling]

Brian, thanks lovie that was battering my brains lol.

[Welshling]

ok me again Brian, thought it would be easier to keep all my link hover issues in the one place. For both our sakes.

delusional.freeforums.net

Can you have a look at my css and forum wrapper please, for the .linkset and div styles because for some reason the links aren't lining up in the banner area. If you hover over the banner, can you see the middle sectioned links area? They look more justified rather than inline-block? If you get my meaning...

Thanks in advance, again >.<

[Brian]

The div that they're contained in is center aligned. The alignment attribute inside a div affects the alignment of elements inside it, not the placement of the div itself.

<div class="columns" align="center">

Removing that alignment bit should left align them, or you can simply type left as the alignment.

[Welshling]

Oh wow i feel bad now, I would of seen that I swear!!!! If i'd of stared at it for long enough

Sorry and thanks again.

[Welshling]

Brian, me again pestering you >.<

Here's what i have so far.
.staffsset > a {  padding: 4px; border-left: 2px solid #333; }
.staffsset > a:hover { -moz-transition:0.5s ease-in-out; -webkit-transition:0.5s ease-in-out; padding: 4px; border-left: 26px solid #e61919; }

<div class="staffsset"><a href="http://delusional.freeforums.net/user/1"><img src="http://i1052./s445/welshling/admin-3.png"></a><br>
               <img src="http://i1052./s445/welshling/gmod.png"> <br>
               <img src="http://i1052./s445/welshling/advertiser.png"> <br>
               <img src="http://i1052./s445/welshling/coder.png"> </div>

All I am doing right now is working on the first image, If possible when hovered over I would like the staff member titles to transition in, is there a way to do this please?

delusional.freeforums.net is the forum, but the theme you're seeing isn't the one I am working on, but if you would like to see the coding working in progress, so to speak. Let me know and thank you again.

[Brian]

Transition in how?

Where do they come from, how do they transition in, and how are they supposed to look?

[Welshling]

Refresh my forum link please, i made the theme live and I like how it is now.
Hover over the banner, then hover over Stephen Moyer (top right picture under staff).
See the red border, would it be possible to have Admin written on that red border?