Title Border Color Box

[coachkriswatkins 0]

To All

     I have built 2 sites already using DMS it is sick!  I am in the process of building another.  I am looking for a manner in which to make the titles in either a text box or media box have a border box color?

 

An example of what I am discussing can be seen on the site www.ProspectsNaiton.com   I want to be able to do something similiar on the site I am currently building chuckyfrierson.com

 

 

Thanks!!!

[Rob 547]

When you inspect the site you're developing in something like Firebug for Firefox, and you've selected the title you should see the related CSS.  There should be specific CSS for the title.  You can style using that and add to custom code.

 

Point me to a specific page and title and I'll check it out too.

[thebastion 20]

coachkriswatkins do what Rob says and use an inspector.

 

It looks like every box gets assigned its own ID you can target your top right MediaBox with this, it should give you an idea:

 

#mediabox0q6jjb {

    color: #FFFFFF;

}

 

#mediabox0q6jjb h3 {

    border: 10px solid pink;

}

 

Good luck.

[Danny+ 1,327]

Hi,

 

As thebastion stated above, inspect your MediaBox section, the title appears to be using a H3 tag. When you inspect your Mediabox section it has a unique ID, will look like this:

 

<section id="mediaboxx8w1g3" data-object="PageLinesMediaBox" data-sid="mediabox" data-clone="x8w1g3" class="pl-section span12 offset0 section-mediabox">

 

So using the ID, you can apply custom CSS to that section and that section only, for example,

 

#mediaboxx8w1g3 H3 {
background: #F00;
color: #FFF;
border-bottom: 5px solid #000;
}

 

However, if you want to apply this to all your MediaBoxes, use the MediaBox section class, which is

.section-mediabox

, for example.

 

.section-mediabox H3 {
background: #F00;
color: #FFF;
border-bottom: 5px solid #000;
}

[coachkriswatkins 0]

You guys are awesome!  I was able to accomplish what I wanted to with your help.  One more question.  Am I able to change the font to a smaller font, I messed around with it, but was not able to accomplish this task

[Danny+ 1,327]

Yeah you can simply apply the font-size: property to your custom CSS, for example.

 

.section-mediabox H3 {
background: #F00;
color: #FFF;
border-bottom: 5px solid #000;

font-size: 12px; /* change the value to whatever you like */
}

[coachkriswatkins 0]

Thanks alot Danny!  I was able to do it, struggling with doing it with the widgetizer though, I can not seem to find the coding for the title of the WP player plugin I used like i was able to for the media box

[usxmarine 0]

is this possible to achieve with text boxes or even columns over a specific text?  Would like to place a border only around the bolded area as follows:

 

<div class="textbox-wrap pl-animation   animation-loaded" style="font-size: 16px;"><strong>Overview</strong><br><div class="hentry"><p> On Demand IT support as well as preventative IT solutions. We work diligently using our knowledge and resources to assist you with all of your computer concerns. We are 100% U.S. based with our primary focus being online repairs. If you require a service not listed please submit a ticket for review.</p>

</div></div>

[Danny+ 1,327]

Hi,

 

You can apply my instructions to all sections, you just need to identify the sections ID, I can not provide as they're unique and created on the fly, so that no one section has the same ID.

 

If you're new to Google Chromes Web Dev tools, I highly recommend checking out the free and uber awesome course from Code School, after completing that course you should be a Chromes Web Dev tools ninja.

 

http://www.codeschool.com/courses/discover-devtools

Just create an account, both the account and course are free.

[seventhsite 1]

I have successfully added the borders I want when editing in firebug AND in chrome developer tools (inspect element)

 

but when I add the custom CSS to my site, it does not work at all. 

 

here is the site: 

http://webspaceninja.com/aims2/news-3/

 

and here is the code that works in firebug and chrome but not in real life...

so strange. 

 

tried it this way: 

 

 

 

body .pl-area .pl-section .pl-section > .pl-section-pad {

    border: 1px solid #D6D6D6 !important;

    border-radius: 5px !important;

    box-shadow: 0 2px 5px #D6D6D6 !important;

    margin-bottom: 1em;

    padding: 8px !important;

}

  

and this way too: 

 

 

 

 

media="all"

body .pl-area .pl-section .pl-section > .pl-section-pad {

padding: 8px;

margin-bottom: 1em;

border: 1px solid #d6d6d6;

border-radius: 5px;

box-shadow: 0 2px 5px #d6d6d6;

}

 

I am trying to make the boxed elements look like the boxes here: 

 

aims-japan.com

 

any help would be greatly appreciated!

[James B 436]

Hi there, on your site you're trying to put the border on each of these elements (i've added the border to illustrate)? http://screencast.com/t/tC6ecRudgE

 

If so you need to apply the code for the border and the shadow to the class for the box.

 

.isotope .isotope-item {......;}

[seventhsite 1]

nope, not trying to do that. 

 

again... works in firebug... but not in real life. 

here is a picture of after I edit in firebug: 

 

http://screencast.com/t/l22E16mkmPf

[seventhsite 1]

while we are at it, any idea why the underline does not work on the far left button of my navigation menu? using ubermenu. 

 

Jesse

[James B 436]

Hi Jesse

 

With you now, ok if I put the css you wrote into DMS and save it works. So check any other css you have in the css panel, any errors in the code prior to that code will stop it being read. For example if there's no closing bracket etc.

 

http://screencast.com/t/pSKLnbRs

 

body .pl-area .pl-section .pl-section > .pl-section-pad {

    border: 1px solid #D6D6D6 !important;

    border-radius: 5px !important;

    box-shadow: 0 2px 5px #D6D6D6 !important;

    margin-bottom: 1em;

    padding: 8px !important;

}

 

In regards to the underline, that is working by the looks of it. That's underlined as it's the current page you're on. What do you mean when you say it doesn't work.

[seventhsite 1]

the underline does not work on the far left "home" button when hovered. all the other buttons have an underline when hovered. 

 

I had already tried deleting all the other custom css entirely to get the border to work, but it still isn't working. Will try it again. 

[seventhsite 1]

It worked! perfect. thank you for making me try again!

 

I have a feeling the underline does not work on the home page button during hover for the same reason there is no divider on the far left. 

In all honesty, I would like there to be dividers on both the far left and right if possible, but I have never found any way to do that.

 

James B, thanks for all your help. it has been very useful.  

[James B 436]

Hi there, excellent, glad you got it working.

 

To add a divider line on each of the menu items you can add a border-left in the css.

 

#megaMenu ul.megaMenu > li.menu-item {

    border-left: 1px solid #000000;

}

 

Then for the one on the end of the menu add a border-right to make it even by using the menu ID for the last tab.

 

#menu-item-125 {

    border-left: 1px solid #000000;

}

 

Hover for the home button its hard to tell as megamenu is adding a lot of code in thre, but try the below to override.

 

#menu-item-91.menu-item a:hover {

    background: -moz-linear-gradient(center top , #F6F8F9, #E6EBF2) repeat scroll 0 0 rgba(0, 0, 0, 0);

    border-radius: 0;

    border-top: 1px solid #FDFDFD;

    box-shadow: 0 1px 0 #000000 !important;

    color: #003B75;

    font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;

    font-size: 17px;

    padding: 11px 22px 18px;

    text-decoration: none;

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);

    vertical-align: middle;

}