« Web, HTML, Tech Forum

how to: hide blog; hide blurb titles; header colors; etc

Posted by usagi

posted

Forum: Web, HTML, Tech

a few codes i added to my profile that i thought others might find helpful

make sure you are adding these in-between your <style> and </style> codes !!

to hide your blog:

.blog-preview{display:none}

to hide "about me" and "who i'd like to meet" titles:

.section h4{display:none}

i paired it with this to ensure it was lined up how i wanted it (you can adjust the 10px)

.blurbs{margin-top:10px !important;}

to hide your URL box:

.url-info{display:none !important;}

to recolor the orange and blue header bars

:root {       
        --lighter-blue: #faa5db;
        --light-orange: #faa5db;
    }

lighter-blue = contact, interests, and links bars
light-orange = blurb, friends, comment bars
replace #faa5db with the color you want

to hide the "user's blurbs" header

.profile .blurbs .heading {display:none !important;}


hopefully i didn't mess any of that up (: happy editing !!


Report Topic

17 Replies

Sort Replies:

Reply by Kathleen

posted

Question, do you know how to add an image to your edit profile, or so and so is your friend section of the layout, my layout doesn't have a url section in it for that or i don't know where its located, i'm hoping it will just be  a simple code like changing the background to your url box section. Thanks either way!


Permalink Report Reply

Reply by NCNH

posted
updated

@Usagi: Don't forget that using display: none; results in that tag and all tags inside that tag being unable to be displayed.

If you want to hide a tag but allow a child tag to be displayed, you can use
visibility: visible;
and
visibility: hidden;
(Note: If you happen to use 'visibility' to hide the tags, you will find that screen space is still reserved for the content even though it's now invisible.)


Permalink Report Reply

Reply by NCNH

posted

@Kathleen:
If you want to change the styling of the friend's list section on your profile, it's possible to obtain all the information on CSS tag hierarchy by right-clicking on the page and inspecting the html. However to an untrained eye it can look like a bunch of mess. Difficult to make meaning from what you can see.
The first question usually is: "How to target the intended parts of the page to make changes?"
An answer to this takes the form of CSS styling classes below where you can copy/paste bits into your <style></style> when needed. Text between a slash and asterisk /*like this*/ is merely a comment and has no function on the code.

div.profile {
  /*your ENTIRE profile between the top and bottom navigation bars*/
  /*a very powerful styling class*/
  /*mentioned only because the classes below MIGHT need to have...*/
  /*... the word div.profile   added to the very front to make it work*/
}


div.friends {
  /*the entire friends section*/
}

  div.friends div.heading {
    /*the heading for just the friends section*/
  }

  div.friends div.inner {
    /*the entire content for the friends section*/
  }

    div.friends div.inner p b {
      /*the friend counter text*/
    }

      div.friends div.inner p b span.count {
        /*the friend number*/
      }

    div.friends div.inner div.friends-grid {
      /*the area where the profiles will be displayed*/
    }

      div.friends div.inner div.friends-grid div.person {
        /*an individually listed friend profile*/
      }

        div.friends div.inner div.friends-grid div.person a:nth-child(1) {
          /*clickable link area for friend profile text*/
        }

          div.friends div.inner div.friends-grid div.person a:nth-child(1) p {
            /*text for name of friend*/
          }

        div.friends div.inner div.friends-grid div.person a:nth-child(2) {
          /*clickable link area for friend profile image*/
        }

          div.friends div.inner div.friends-grid div.person a:nth-child(2) img {
            /*the actual image of the friend*/
          }

Note well: It is in your interest to NEVER use !important to force a style to work. !important should only be used as an absolute last option for which you will likely never need to use. If you ever use a style and it doesn't work problems can include:
* there is another class styling which is 'more specific' (and as such is given higher priority),
* you may be trying an experimental style that doesn't work well with your browser,
* you may be using a style in a wrong way,
* you may be using a style in a way that works elsewhere in testing but the tag you're using it with isn't appropriate,
* you may be using a style in a way that works elsewhere in testing and you're using it on a tag that should work but a property is being inherited from some tag higher up (stylings such as 'overflow:hidden' or 'display:block'),
* you might have filled the styling editing textbox with too many characters and all your changes have been reverted -- thereby undoing all your work when you clicked 'save' (such a number of characters is very large but it still is a finite)
* ...
Here's a fun piece of code using class targeting with some advanced css:

/* BEGIN replace friend counter with text */

div.profile div.friends div.inner p b span.count {
  visibility: hidden;
}

div.profile div.friends div.inner p b span.count:before {
  visibility: visible;
  content: ' very';
}

div.profile div.friends div.inner p b span.count:after {
  visibility: visible;
  content: 'awesome ';
}

/* END replace friend counter with text */


also...


/* BEGIN change the background color of the different friend profiles*/

div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+1) {
  background: red;
}

div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+2) {
  background: orange;
}

div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+3) {
  background: yellow;
}

div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+4) {
  background: green;
}

div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+5) {
  background: blue;
}

div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+0) {
  background: purple;
}

/* END change the background color of the different friend profiles*/


These examples are untested, yet there is faith they will work as intended.


Permalink Report Reply

Reply by MrNickBaby

posted

Do you know the css code that hides the div.class link table?


Permalink Report Reply

Reply by Jessica

posted

This was really helpful! Thank you <3


Permalink Report Reply

Reply by LOVE

posted

thank you so much sweetie!! ♥


Permalink Report Reply

Reply by N0ЯA

posted

it worked!! thank u so much :D


Permalink Report Reply

Reply by Littlemischiefbaby✧

posted

THANK YOU LOVE <3 


Permalink Report Reply

Reply by linkzac

posted

yooo this was so helpful! i had no idea how to change the heading title


Permalink Report Reply

Reply by yu006

posted

Tysm for posting this! It's super helpful.


Permalink Report Reply

Reply by b

posted

how do i change the "about me" and "get to know me" to say something else?? :(


Permalink Report Reply

Reply by ‎⋆˚࿔ 𝓳𝓮𝓼𝓼 𝜗𝜚˚⋆

posted
updated

how do i hide only the about me? (i found out, pasted my code below)

<style>
.blurbs .inner .section:first-of-type h4 {display:none}
</style>



Permalink Report Reply

Reply by J. Soda

posted

This was really helpful, thanks so much :))


Permalink Report Reply

Reply by Pixel

posted

its not working for me, am I doinf something wrong?


Permalink Report Reply

Reply by ⚙️Cemetery corpse

posted

Try this i think bc you didnt put in the styles

<style>

.profile .blurbs .heading {display:none !important;}

</style>


Permalink Report Reply

Reply by H0mo_C1got0/R

posted