Announcement

Collapse
No announcement yet.

Need to add background to text

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need to add background to text

    Could someone help me figure out how to add a colored background to a wall of text on my homepage?

    Website:

    http://www.politicaloutsource.com

    What I want to do:

    See where it says: " CONDENSING THE VOTE: HOW POLITICIANS ARE FILLING BIG CITIES TO WIN THE VOTE"

    It's gray (#777 hex code), but does not show up very well on the image. I would like to add a background to this wall of text on the image, so it's easier to read. How would I do this? Also, is it possible to make the background opacity less dense, so it doesn't look like an extremely solid color, rather blends in with the background image?

    Thanks!
    Lose Weight Fast | Common Diet Mistakes | THEGYMHERALD.com

    PM me to add your backlink to my website

  • #2
    Hi there MonetaMan,

    Try adding this to your CSS...

    Code:
    
    .FeaturedPost .post-summary h3 a {
        display: block;
        padding: 0.25em 0;
        border-radius: 1em;
        background-color: rgba(255,255,255,0.85);
        box-shadow: 0.25em 0.25em 0.25em rgba(0,0,0,0.6);
        color: #000;
     }
    
    ...adjusting values to suit your taste.


    ~ the original bald headed old fart ~

    Comment


    • #3
      Originally posted by coothead View Post
      Hi there MonetaMan,

      Try adding this to your CSS...

      Code:
      
      .FeaturedPost .post-summary h3 a {
      display: block;
      padding: 0.25em 0;
      border-radius: 1em;
      background-color: rgba(255,255,255,0.85);
      box-shadow: 0.25em 0.25em 0.25em rgba(0,0,0,0.6);
      color: #000;
      }
      
      ...adjusting values to suit your taste.
      Nailed it!! You're simply amazing coothead!!! Is there a way I can make the text change to another color when the cursor hovers over it?
      Thanks so much!!

      Oh, and I hate to ask you for another favor, but I need help figuring out one more thing:

      I need to make my POST TITLE font bigger (about 40px), right now it is 26px. However, when I go to change it in the HTML, it changes ALL the post titles, including the one on my landing home page. I simply only want to change the post title on the POST it self. For example, I want the post title on this post:
      http://www.politicaloutsource.com/20...ravel-ban.html

      to be 40px, but i DO NOT want the post titles on my home page (http://www.politicaloutsource.com) to be 40px. I want them to stay at 26px.

      Thanks so much!
      Lose Weight Fast | Common Diet Mistakes | THEGYMHERALD.com

      PM me to add your backlink to my website

      Comment


      • #4
        Hi there MonetaMan,

        Try adding this to your CSS...

        Code:
        .FeaturedPost .post-summary h3 a:hover {
            color: #900;
         }
        ...adjusting the value to suit your taste.

        For you second problem, if it is possible for you
        to change the HTML at the top of this document...
        federal-judge-halts-trumps-travel-ban.html

        Code:
        <html xmlns='http://www.w3.org/1999/xhtml'
        xmlns:b='http://www.google.com/2005/gml/b'
        xmlns:data='http://www.google.com/2005/gml/data'
        xmlns:expr='http://www.google.com/2005/gml/expr'
        >
        ...to this...

        Code:
        <html xmlns='http://www.w3.org/1999/xhtml'
        xmlns:b='http://www.google.com/2005/gml/b'
        xmlns:data='http://www.google.com/2005/gml/data'
        xmlns:expr='http://www.google.com/2005/gml/expr'
        id="special"
        >


        ...then you can add this to your CSS...

        Code:
        #special .post-title {
            font-size:40px;
         }
        ...adjusting the value to suit your needs.
        Last edited by coothead; 02-04-2017, 06:18 AM.


        ~ the original bald headed old fart ~

        Comment


        • #5
          Originally posted by coothead View Post
          Hi there MonetaMan,

          Try adding this to your CSS...

          Code:
          .FeaturedPost .post-summary h3 a:hover {
          color: #900;
          }
          ...adjusting the value to suit your taste.

          For you second problem, if it is possible for you
          to change the HTML at the top of this document...
          federal-judge-halts-trumps-travel-ban.html

          Code:
          <html xmlns='http://www.w3.org/1999/xhtml'
          xmlns:b='http://www.google.com/2005/gml/b'
          xmlns:data='http://www.google.com/2005/gml/data'
          xmlns:expr='http://www.google.com/2005/gml/expr'
          >
          ...to this...

          Code:
          <html xmlns='http://www.w3.org/1999/xhtml'
          xmlns:b='http://www.google.com/2005/gml/b'
          xmlns:data='http://www.google.com/2005/gml/data'
          xmlns:expr='http://www.google.com/2005/gml/expr'
          id="special"
          >


          ...then you can add this to your CSS...

          Code:
          #special .post-title {
          font-size:40px;
          }
          ...adjusting the value to suit your needs.

          Once again coothead, you're the greatest!! The Post Title CSS did not work, but adding the one to get it to change color on hover did! fantastic!

          I know I've been asking a lot, and i am so very grateful!! but i have one more favor to ask for you. How can I remove the snippet/summary from underneath the images on my homepage? There is a 90 character summary that I don't know how to get rid of, do you?

          Thanks!!
          Lose Weight Fast | Common Diet Mistakes | THEGYMHERALD.com

          PM me to add your backlink to my website

          Comment


          • #6
            Hi there MonetaMan

            The Post Title CSS did not work...
            That is because you did no follow my instructions to the letter.

            The id="special" that I wanted you to add just to the html tag of your...
            federal-judge-halts-trumps-travel-ban.html
            ...document, appears to have been added to all of your documents.

            But worse than that, it has been placed outside of the html tag.

            The whole point of the exercise was to isolate the CSS condition to that one page.

            Also note that on all of your pages, this CSS...
            Code:
            
                    .FeaturedPost .post-summary p {
                        margin:5px 25px 25px;
            
            ...is missing a closing curly bracket - "}"

            This omission does have consequences.

            As for your snippet/summary problem, this CSS...

            Code:
            
            .excerpt {
                display: none;
             }
            
            ...should eradicate it.



            ~ the original bald headed old fart ~

            Comment

            Working...
            X