#camila codes

[longitud-de-onda]

tags one; by camila

static preview (light) (dark) / pastebin

a simple navigation page with hovers and a dark version. terms of use and instructions within code.

please like/reblog if you use

features:

sidebar

hover links

hover over category cards for tags

unlimited category cards

unlimited links per category

easy color customization

icon/avatar image

[longitud-de-onda]

escrito; by camila @longitud-de-onda

static preview / pastebin

about me and masterlist page for fanfic writers. terms of use and instructions within code.

please like/reblog if you use

features:

3 tabs

5 links

icon/avatar image

customizable colors and icons

as many fanfics as tumblr character limits allow

[longitud-de-onda]

about two; by camila 

static preview / pastebin (support me on ko-fi?)

a neumorphic about page with five tabs and a variety of links. terms of use, instructions, and credits in code.

please like/reblog if you use

features:

115 px square icon

updates scroll

5 tabs, including stats, about, likes and dislikes, and an activities section

two custom navigation links

three social media links

custom neumorphic tooltips

[longitud-de-onda]

hi there! i hope you don't mind a question on your theme escrito? i'd like to use it, but i'd like to make the tabs on the about 'page' links (instead of just the name/pronoun/etc. info), so when each one is clicked, new text is shown where the bio text is. i've spent most of the day trying to do this myself so as not to bother you, but i think im having trouble because there's already the script to do this with the 3 side tabs. are you able to help at all with this? no worries if not :) thx!

hey thanks so much for wanting to use it, that makes me super excited! 

tabs are really difficult to work with and honestly i wasn’t even sure if i could do this since i’m a beginner at html, but i’ve figured it out so here you go. 

so you’re first going to want to go to the css, and find the section ‘bio page content’ and replace all of .tidbit{…} and .tidbit:hover {…} with:

.gblock button {    width:121px;    height:30px;    background-color: #b5d1cf;    color: #fff;    font: 9pt ‘Open Sans’, sans-serif;    text-transform: uppercase;    letter-spacing: 2px;    line-height: 30px;    outline: none;    border: none;    float:left;}

.gblock button:hover {    background-color:#86b4b0;}

.gblock button.active {    background-color:#424b54;}

(and while you’re there, i just updated the pastebin with a little fix, in .btxt {…} you should replace overflow-y: scroll; with overflow-y: auto;)

then go down to the about tab in the html part and replace the whole thing with this:

           one

           two

           three

           four

           tab one text

           tab two text

           tab three text

           tab four text

           tab five text

           tab six text

           tab seven text

           tab eight text

                   Five

           six

           seven

           eight

   and make sure the only stuff left before the javascript is this:

C

and finally, underneath the first big of javascript, after the place this little chunk of javascript that’ll make those tabs work

<br>function openPage2(evt, pageName) {<br>  var i, btxt, tablinks;<br>  btxt = document.getElementsByClassName(“btxt”);<br>  for (i = 0; i < btxt.length; i++) {<br>    btxt[i].style.display = “none”;<br>  }<br>  tablinks2 = document.getElementsByClassName(“tablinks2”);<br>  for (i = 0; i < tablinks2.length; i++) {<br>    tablinks2[i].className = tablinks2[i].className.replace(“ active”, “”);<br>  }<br>  document.getElementById(pageName).style.display = “block”;<br>  evt.currentTarget.className += “ active”;<br>}

document.getElementById(“defaultOpen2”).click();

that should do the trick, if it doesn’t, maybe come off anon and send me a message and i can help troubleshoot with a little more detail.