Home» Forum» Web & Tech» changing individual tab backgrounds

changing individual tab backgrounds

Back to Web & Tech

hi everyone! i'm new here and trying to make a custom layout but i'm not very good at css lol. i've tried tinkering around here and there with the code but i just can't get it to work. i want to make the background for the interests tab a different picture than the one for the photo and video tabs...is that possible?

on a side note, i tried doing rainbow links but couldn't get that to work either ;>w> help with either or both of these would be very appreciated, thanks!

“i’m not unhinged, i'm loose. the door still operates” -jerma985

Honestly I wish I knew! Those rainbow links are gorgeous :-) 

@BULLET ikr!! if i figure it out i'll let you know :3

“i’m not unhinged, i'm loose. the door still operates” -jerma985

hi! im not good at css too but this is what helped me lol. so if you go to the css full tutorial thats found at the bottom of the advanced layout option, theres the friendrewind layout structure and it has the 2 options of 

.videos-preview / .photos-preview

its kinda hard for me to explain it so ill give my example: 

.contact, .friends, .videos-preview, .photos-preview {

  background-image: url("https://i.pinimg.com/736x/71/f4/55/71f455f866a13877d95eafe2b650bb50.jpg") !important;

  background-size: cover !important;

  background-position: center center !important;

  background-repeat: no-repeat !important;

1. it should show up differently than your interests tab. .table-section is your interests section so just kinda paste that in a separate background image section than your .photos-preview & .videos-preview. 

2. if you want to make the photos and videos preview section different than everything else i would just put the code as 

.videos-preview, .photos-preview {

  background-image: url("yourimage.jpg") !important;

3. also for my profile i made the interests tab transparent but if i wanted to put an image there, i would keep the photos & videos background image under the table section only because if i put the videos & image code above it, it would show as the same image?? idk it may be fault on my end but thats what happened to me. 

4. also to make it work (for me at least) instead of saving your layout, copy it and paste it on your actual profile's css instead. (idk if you're doing this on mobile or not, i am, so it was kinda difficult for me but it may be easier to copy it on pc/laptop. 

lmk if this helps!!! there may be an easier way but this helped for me LOL (sorry if this is too long i just didnt wanna leave things unsaid lol)


⠀⠀⠀∘₊✧──────✧₊∘ love, 0ttia ⭒₊ ⊹₊ ⭒

@0ttia 

THIS WORKED THANK U SM!! u explained perfectly :D i rly appreciate the help! 

“i’m not unhinged, i'm loose. the door still operates” -jerma985

@DIZMAL YAYYY you are so welcome omg


⠀⠀⠀∘₊✧──────✧₊∘ love, 0ttia ⭒₊ ⊹₊ ⭒

@DIZMAL also for the rainbow links its like towards the beginning of where the backgrounds start but there should be a code that looks like 

a, .profile a, .table-section a, .module a { color: #hex !important; }

just delete the {color: # !important; } and paste this:


.rainbow-link {

  font-weight: bold;

  text-decoration: none;

  background: linear-gradient(90deg, #ff3333, #ff9933, #ffff33, #33cc33, #3333ff, #9933ff);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}

i was tryna figure it out myself LOL. a = links and if you keep the a, .profile a, yatata all that jazz, its gonna change EVERY LINK. so if you dont want that, you should probably just separate each section. i hope this helps too...


⠀⠀⠀∘₊✧──────✧₊∘ love, 0ttia ⭒₊ ⊹₊ ⭒

@0ttiaur amazing yesss this worked too! i feel more confident messing with the code now thanks to u :D

“i’m not unhinged, i'm loose. the door still operates” -jerma985

@DIZMAL im so happy to hear that!! im glad i could help


⠀⠀⠀∘₊✧──────✧₊∘ love, 0ttia ⭒₊ ⊹₊ ⭒

@BULLET

here's how to do the rainbow links!

“i’m not unhinged, i'm loose. the door still operates” -jerma985

You must be logged in to reply.