Adding the Tag Library to the Sidebar

Ironeyes
Ironeyes
edited November 2013 in Campaign Portal Building
Hi,

I'm not sure whether this is possible at all, but I'd like to add the tag library (All Tags) to the sidebar of each page. Is there a way to do that? I believe the CSS id is tag-library, if that helps. I'm very new to CSS and am still trying to figure out what can and can't be done with it.

Comments

  • Belrathius
    Belrathius
    Posts: 206
    I would appreciate this as well; I already have a custom navbar that requires HTML addition to each page, so adding the tag section through HTML is acceptable (since CSS doesn't allow for adding content).
  • dawnhawk
    dawnhawk
    Posts: 113
    The problem is that the tag...list? It's not really a cloud...is being "generated" (php code is pulling the values from the DB and populating the list). If you were to add it with HTML it would be static (the numbers wouldn't increment as you added things, and no new tags would appear unless you manually updated every page you put the HTML on, everytime you made a change. It is "possible"...but it's not very practical. Especially if you have any quantity of pages!!

    I too would love my tags back where I can access them easily for navigation - but I suspect it's going to have to be labeled as a "feature request" and/or "bug" for it to happen in a practical sense.

    If you wanted to add it manually (and you have far more patience than I do)



    All Tags


    YourTag(#)
    ...





    Inside whatever additional code you have for your custom navbar.
  • Ironeyes
    Ironeyes
    Posts: 21
    @dawnhawk

    Thanks! I assume there's no way to call the php from the front end?

    There is one suggestion I can make for anyone who wants to add the HTML. Just click a tag to go to the page with the All Tags column, then click inspect element on it and copy the code. Then you can just paste it wherever you want. (I figured that out last night after posting, but realized that since the library was being dynamically generated this would be of limited use.)
  • Ironeyes
    Ironeyes
    Posts: 21
    I was able to use gnunn's guide on how to create a navigation sidebar to create a sidebar, but it's "inside" my page. I'd like it to be "outside" my page, underneath the Last Updated sidebar, if possible. Does anyone know how to do that?
  • dawnhawk
    dawnhawk
    Posts: 113
    >I assume there's no way to call the php from the front end?

    Valid question - short answer GOOD ASSUMPTION! ^.^

    I'm fairly certain (99.9999...%) scripting languages of all types (php, javascript, asp etc) would/should/will always get stripped out of the pages on OP. Allowing users to include php snippets in a CMS is asking for someone to crash your site, destroy your database etc. ^.^ It is a very bad idea. It's a bad idea when you know your users are tech savvy...it's an exceptionally bad idea when your users think learning basic CSS is a trial. Believe me when I say it can go wrong in more ways that I can think of before you could blink (I've seen CMS's that allow it for specific users - it is not an "impossible thing"...but aside from site admins I have never in 8 years of being a Programmer Analyst have I ever seen a reason to enable it and even then...I'm not always convinced).

    Also giving users direct access to the db querys in general is a bad idea. Even for read only purposes.

    As far as enabling the "outside the page" side bar goes - I would HIGHLY recommend you talk to Langy (either PM him or poke your head into the Vanguard forum). I know for a fact he has one on his Edgerunners site.
  • Langy
    Langy
    Posts: 364
    I'm about to head out to the movies, but I'll post my code here right now and explain it when I get back.

    Here's what it looks like inside a page:

    @

    Left Sidebar Here




    Right Sidebar Here

    @


    Here's the CSS:

    @.sidebar-top{
    position:fixed;
    width:0px;
    top:50px;
    }
    .sidebar-left{
    position:relative;
    right:220px;
    }
    .sidebar-right{
    position:relative;
    width:150px;
    left:940px;
    }@
  • Ironeyes
    Ironeyes
    Posts: 21
    @dawnhawk
    Good to know! :)

    @Langy
    Awesome! Thanks! I managed to implement it, but there's one thing I can't seem to figure out. My sidebar is really long (it's all the tags in my wiki) and because it's floating, I can't scroll to the bottom of it. Is there any way to pin it down?
  • Ironeyes
    Ironeyes
    Posts: 21
    Update: I figured out how to pin it down, but no matter what I do the text seems to "stack" on top of each other. Even though the sidebar is far to the right of the text body, either the siebar starts below the body text, or the body text start below the sidebar.
  • Ironeyes
    Ironeyes
    Posts: 21
    After a bit more trial and error, I managed to bodge it into place by setting the bottom property.
  • Ironeyes
    Ironeyes
    Posts: 21 edited November 2013
    In case anyone's interested, here's what I did. Since I don't want to have to maintain duplicate code all over the place, I'm only using this sidebar on the main page of my wiki. As such, I didn't really worry about what code went in the HTML and what in the CSS. Since we're not using the GM Only section on that page, I decided to put the HTML in there. Also, I'm not experienced in programming for the web, so there's probably loads of ways this could be improved upon.


    GM Only Section HTML


    bc.



    bc.

    bc.
    TAG LIBRARY CODE

    bc.






    CSS

    bc. .sidebar-top{ position:relative; width:0px; top:50px; }
    .sidebar-left{ position:relative; right:220px; }
    .sidebar-right{ position:relative; width:150px; left:775px; bottom:1050px;}
    Post edited by Ironeyes on
  • dawnhawk
    dawnhawk
    Posts: 113
    Or Langy will track you down. That works too! :)

    Glad you got it working the way you want Ironeyes!
  • bluesguy
    bluesguy
    Posts: 127
    Hi,

    Ok I don't get the CSS & HTML that @Ironeyes posted. I am guessing that "TAG LIBRARY CODE" is some actual code to generate the tags.

    Help?

    David
  • Ironeyes
    Ironeyes
    Posts: 21
    Hi David,

    First, you need to have a paid account to use the CSS. So this won't work if you don't have a paid account.

    Second, a few disclaimers. Keep in mind that this code is not dynamic - if you add new tags you'll need to swap in the new "Library Code". You also have to add the HTML for EACH page you need it on. (My advice is to only add it to your Main Page.) Finally, whatever page you add this code to should have an empty GM Only section. Otherwise you'll have formatting issues in your GM Only Section. I'm not actually a web guy; someone who is could probably do this a bit less crudely.

    Here's how you find the "Library Code":
    -Click on a Tag (any will do)
    -You should see on the right of the new page a column that says "All Tags".
    -Right click over All Tags and select Inspect Element.
    -At the bottom of your browser you should see HTML. Just above the highlighted line, you should see:

    -Highlight and hit Ctrl+C (the keyboard copy shortcut).
    -Paste that code into Notepad or something

    Here's how you add the HTML:
    -Paste the following code into the GM Only section of your Main Page (or wherever you want the Tags):

    bc.




    PASTE THE ALL TAGS CODE HERE

    bc.




    -Replace the PASTE THE ALL TAGS CODE HERE with the code you pasted into Notepad

    -It should look something like this, but probably much longer:

    bc.







    TAG LIBRARY CODE START

    All Tags


    Active PC(2)
    Anomalies(7)
    Apotheosis(1)
    Ariadne's Maze(18)



    TAG LIBRARY CODE END





    -You can ignore the TAG LIBRARY CODE START and TAG LIBRARY CODE END. They're just there to make it easier for me to find where to add the Tag Code. Or use them if they help. (In other words, those don't execute anything; they're just there for my convenience.)

    Adding the CSS (You only have to do this step once):
    -Go to Settings > Advanced > Custom CSS

    -Paste in the following code:

    bc. .sidebar-top{ position:relative; width:0px; top:50px; }
    .sidebar-left{ position:relative; right:220px; }
    .sidebar-right{ position:relative; width:150px; left:775px; bottom:1050px;}


    With that, you should be good to go!
  • bluesguy
    bluesguy
    Posts: 127
    Thank you.... I have a paid account. Thank you what you described makes plenty of sense. Very sad that we can't get tags back the way they were prior to reforge.
  • Ironeyes
    Ironeyes
    Posts: 21
    Just didn't want you wondering why it wasn't working in case you didn't. :) Hope it works for you!

    Yeah, getting the tags back would be nice.
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions