Esthetic of the "category block"

Hello everybody,

Here I am again, to ask for some help. I want to personalize the "category block", this : http://prntscr.com/vm2fqk ; and make it look more or less like that : http://prntscr.com/vm2gig

Is that possible on forumotion ? We are trying hard to find a solution, but apparently, we can't by ourselves...

Thank you very much !

Hello @Gurufissu,

You can do it yes but there are some things you have to have before doing that.
You need the two images for the left and right corners of your categories bars. Once you have those you can make the changes.

Now with this code in your CSS:

Code:

li.header dl.icon dd.dterm {
    background: #1f3953;
    border: 4px solid #3e3e3e;
    box-shadow: inset 0px 2px 12px #000;
    text-shadow: 0px 2px 4px #000000;
}

you will have the result for the coloring of your headers:



For the left and right images you need to have your own (non copyrighted) images to add there with some additional codes.

Regards,
TC.

TheCrow wrote:Hello @Gurufissu,

You can do it yes but there are some things you have to have before doing that.
You need the two images for the left and right corners of your categories bars. Once you have those you can make the changes.

Now with this code in your CSS:

Code:

li.header dl.icon dd.dterm {
    background: #1f3953;
    border: 4px solid #3e3e3e;
    box-shadow: inset 0px 2px 12px #000;
    text-shadow: 0px 2px 4px #000000;
}

you will have the result for the coloring of your headers:



For the left and right images you need to have your own (non copyrighted) images to add there with some additional codes.

Regards,
TC.

Thanks you for the answer !

So the only choice is to add images on the corners ? Can't we have this image as a background : https://media.discordapp.net/attachments/556900395272896522/778974286500462613/test_cates.png?width=1442&height=122

replacing the "category block" as it is now ?

You can do that but it will be out of the "boundaries" of your forum. If you add it as an image you'd have to reduce the categories width in order to fit in there. (In both cases to be honest) But yes, doing it like this is a lot easier than adding the entire image.

Hmmm. I see, thank you.

So which code should I use, to only add images at the two corners?

TheCrow wrote:You can do that but it will be out of the "boundaries" of your forum. If you add it as an image you'd have to reduce the categories width in order to fit in there. (In both cases to be honest) But yes, doing it like this is a lot easier than adding the entire image.

By the way, I don't think we have "boundaries" on our forum

What I meant is the boundaries of each computer screen. For example, on my computer your forum exceeds the width of my screen and I have to zoom out to see the entire forum. Others may have the same issue. With the addition of these images now I will have to zoom even more to see the images fully. That is why I added the word in quotes.

If you still want to add the images, you can simply post the images link for the wolf head on the right and the one on the left here and I will work on them to post the code you want.

Regards,
TC.

Ah ok I see, thank you.

Here are the images !

https://i.servimg.com/u/f81/20/11/06/00/wolfl10.png

https://i.servimg.com/u/f81/20/11/06/00/wolfr10.png

Thank you.
So here are the additional codes you have to add to your CSS:

Code:

/*For the left wolf head*/
.forabg li.header:before {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfl10.png);
    position: absolute;
    margin: -34px 0px 0px -90px;
}
/*For the right wolf head*/
.forabg li.header:after {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfr10.png);
    position: absolute;
    right: -90px;
    margin-top: -90px;
}

This, in addition to the previous code I posted will give you this result:


Regards,
TC.

Wow, it works perfectly. Thank you very much!!

You're welcome. Is there anything I can assist you, regarding this issue?

Oh man, sorry, I have another problem. When we change category tabs, the wolf heads mostly disappears.

https://cdn.discordapp.com/attachments/556900395272896522/779014442313580554/Screenshot_2020-11-19-17-05-10-416_com.android.chrome.png

I see them just fine:


Try clearing your browser's cookies and cache and check it again!

I tried, doesn't change it.

Did you try changing tabs multiple times?

EDIT: My colleague is pretty sure it comes from the tabs script, as it only takes the category tabs and not the elements around them.

Here it is, if you want to look at it:

Code:

$(function(){
 
  /* variable temporaire , tempo variable */
  var t;
 
  /* liste des onglets avec les catégories en faisant partie , tab list with categories within */
  var onglets=  [
               ["Voir tout",[0,1,2,3,4,5,6,7,8,9,10]],
                          ["Partie MJ",[0,1,3]],
                          ["Règlement",[2]],
               ["Xenovox",[3]],
                          ["Kaer Morhen",[4]],
                          ["Le Continent",[5,6]]
                ];
 
  /* fonction pour sélectionner un onglet d'après une string s  , function to select a tab from a string s*/
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
  /* fonction pour voir si un index de catégorie i est dans un onglet d , function to see if a category i index is in a tab*/
  var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
        if(d[1][j]==i) return !0;
      return !1;
  };
 
  /* onglet sélectionné par défaut , default selected tab*/
  var songlet= onglets[0];
  /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre , is the selectionned tab saved from an index's display to an other ?*/
  var save= true;
  /* temps pour slider en ms , slide time*/
  var timeslide= 300;
 
  /* récupération de l'onglet sauvé d'une autre fois , saved tab backup*/
  if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
        if(t=getOnglet(t))
            songlet= t;
 
  /* entoure les catégories d'un <div class="cat-table" /> , inline categories in a <div class="cat-table" /> */
  $("dd.dterm").closest("div.forabg").wrap('<div class="cat-table" />');
 
  /* affichage de l'onglet en cours , display the current tab*/
  $(".cat-table").filter(function(index) {
    return !inOnglets(songlet,index);
  }).hide();
 
  /* ajout du div des onglets , add the tab's div*/
  $(".cat-table:first").before('<div id="cat-onglets"></div>');
 
  /* ajout des onglets dans le div , add tabs in div*/
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
 
  /* clic sur un onglet , click on tab*/
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide);
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
  });
 
});

Yes I have. The heads stayed on the entire time.

Video:

Well that's really strange. It works fine on Mozilla, but it doesn't on chrome or opera !!

I am using Google Chrome and as I showed you in the video above, it works perfectly.

if you click the tabs the heads are missing i confirm that

maybe its a screen resolution issue

They are missing until the script loads. Then they should appear once the tabs are fully shown.

yes i saw the video but for me are not showing they stay hidden

Only a little part is shown, the part with doesn't get out of the big "block"

Tried on a Chrome Opera Brave, only on Mozilla it does work for us. And it doesn't load, even after a long moment

add this to your css

Code:

 
forabg .header {
    position: unset;
}


Okay, so try replacing the above code to this one:

Code:

/*For the left wolf head*/
.forabg:before {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfl10.png);
    position: absolute;
    margin: -34px 0px 0px -90px;
}
/*For the right wolf head*/
.forabg:after {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfr10.png);
    right: -90px;
    position: absolute;
    top: -34px;
}
.forabg { position: relative }

There was that code that changed the

Code: li.header

element. This way, the heads won't be affected.

skouliki wrote:add this to your css

Code:

 
forabg .header {
    position: unset;
}


This worked for the left head, but the whole forum was widened and buggued then

TheCrow wrote:Okay, so try replacing the above code to this one:

Code:

/*For the left wolf head*/
.forabg:before {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfl10.png);
    position: absolute;
    margin: -34px 0px 0px -90px;
}
/*For the right wolf head*/
.forabg:after {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfr10.png);
    right: -90px;
    position: absolute;
    top: -34px;
}
.forabg { position: relative }

There was that code that changed the

Code: li.header

element. This way, the heads won't be affected.

It's as it was before again 1 change of tab works, but when changed twice, the heads disappear !

Try replacing it with this one to see if it works:

Code:

/*For the left wolf head*/
.cat-table:before {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfl10.png);
    position: absolute;
    margin: -34px 0px 0px -90px;
}
/*For the right wolf head*/
.cat-table:after {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfr10.png);
    right: -90px;
    position: absolute;
    top: -34px;
}
.cat-table { position: relative }

No difference helas !

Sorry @Gurufissu, I am not sure why this is happening to you guys.

Try adding this instead, maybe with the

Code: !important

in there will solve this issue.

Code:

/*For the left wolf head*/
.cat-table:before {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfl10.png)!important;
    position: absolute!important;
    margin: -34px 0px 0px -90px!important;
}
/*For the right wolf head*/
.cat-table:after {
    content: url(https://i.servimg.com/u/f81/20/11/06/00/wolfr10.png)!important;
    right: -90px!important;
    position: absolute!important;
    top: -34px!important;
}
.cat-table { position: relative!important }

Arff... That's so strange, it still doesn't work

While it works on mozilla...

Maybe we should try something with skouliki's code, it works for the left head

If it can help, what is happening is that : the categories that are hidden through the using of the tabs, are the ones which aren't shown anymore