Custom Css

Custom CSS

The whole css example located bellow, for more details + expiation look beneath the exempt


#1 .social-share-button,
#2 .maps,
#3 #header .top-bar-section a[href=“/maps/new”],
#4 .forum,
#5 #header .top-bar-section a[href=“/campaign_forum_topics/new”],
#6 .forum-module-container {
#7 display: none !important;
#8 }
#9
#10 .campaign-public-layout #content {
#11 max-width: 1280px !important;
#12 }
#13
#14 /* Coloring /
#15 .main-content a.tag-link {color: #0645AD}
#16 .main-content a.tag-link:visited {color: #0B0080}
#17
#18 .main-content a.wiki-content-link,
#19 .main-content a.wiki-page-link {color: #0645AD}
#20 .main-content a.wiki-content-link:visited,
#21 .main-content a.wiki-page-link:visited {color: #0B0080}
#22 .main-content a.create-wiki-content-link,
#23 .main-content a.create-wiki-page-link {color: #CC2200}
#24 .main-content a.create-wiki-content-link:visited,
#25 .main-content a.create-wiki-page-link:visited {color: #A55858}
#26
#27
#28 /
Country Table /
#29 .country-table {
#30 float:right;
#31 width:33%;
#32 margin:0% 0% 3% 3%;
#33 font-family:arial;
#34 font-size:8pt;
#35 line-height:normal;
#36 border:1px solid black;
#37 border-collapse: collapse;
#38 background: #F9F9F9;
#39 }
#40
#41 .country-table tr:first-child {background-color:#666666 !important;}
#42 .country-table tr:first-child td {
#43 vertical-align:top;
#44 color:white;
#45 text-align:center !important;
#46 }
#47
#48 .country-table tr td {text-align:center; border-top: 1px solid #767676;}
#49 .country-table tr td:first-child {text-align:right;}
#50 .country-table tr.extend td:first-child {text-align:center; border-top: 0px;}
#51
#52
#53 /
Footer /
#54 #main-footer { display: none; }
#55
#56
#57 /
Items → Location*/
#58 /* Topbar */
#59 #header .top-bar-section a[href=“/items/new”] {
#60 color: transparent;
#61 }
#62 #header .top-bar-section a[href=“/items/new”]:after {
#63 position: absolute;
#64 left: 15px;
#65 content: “Location”;
#66 color: rgba(255, 255, 255, 1);
#67 }
#68
#69 /* Menu */
#70 .op-icon-backpack:before {content:“” !important;}
#71 #dashboard-main-nav .section.items .nav-text {
#72 position: relative;
#73 color: transparent;
#74 }
#75 #dashboard-main-nav .section.items .nav-text:after {
#76 position: absolute;
#77 left: 15px;
#78 content: “Locations”;
#79 color: rgba(255, 255, 255, 0.35);
#80 }
#81
#82 /* Edit */
#83 .main-section label[for^=“game_item_descrip”],
#84 .main-section label[for=“game_item_name”],
#85 .main-section label[for=“game_item_bio”] {
#86 position: relative;
#87 color: transparent;
#88 }
#89 .main-section label[for^=“game_item_descrip”]:after,
#90 .main-section label[for=“game_item_name”]:after,
#91 .main-section label[for=“game_item_bio”]:after {
#92 position: absolute;
#93 left: 0px;
#94 color: #4D4D4D;
#95 }
#96 .main-section label[for^=“game_item_descrip”]:after {content: “Location Details”;}
#97 .main-section label[for=“game_item_name”]:after {content: "Location “;}
#98 .main-section label[for=”game_item_bio"]:after {content: “Location Lore”;}
#99
#100 form[id^=“edit_game_item_”] .main-section #game_item_name + .row .columns:first-of-type {width: 100%;}
#101 form[id^=“edit_game_item_”] .main-section #game_item_name + .row .columns:last-of-type {display: none;}
#102
#103 form[id^=“edit_game_item_”] .main-section:last-of-type .row .columns {width: 100%;}
#104 form[id^=“edit_game_item_”] .main-section:last-of-type .row .columns .character-avatar {display: none;}
#105
#106 /* Single */
#107 .item-show .main-content-container {width: 100% !important;}
#108 .item-show .category,
#109 .item-show #sidebar {display: none;}
#110 .item-show [class^=“descrip”] h6,
#111 .item-show .bio h6 {
#112 position: relative;
#113 color: transparent !important;
#114 }
#115 .item-show [class^=“descrip”] h6:after,
#116 .item-show .bio h6:after {
#117 position: absolute;
#118 left: 0px;
#119 color: #232323 !important;
#120 }
#121 .item-show [class^=“descrip”] h6:after {content: “Details”;}
#122 .item-show .bio h6:after {content: “Lore”;}
#123
#124 /* Index */
#125 .item-index .main-content .highlight-container,
#126 .item-index .main-content .character-search-area {display: none;}
#127 .item-index.campaign-game-master .main-content .highlight-container,
#128 .item-index.campaign-game-master .main-content .character-search-area {display: block;}
#129 .item-index .character-quick-search h4 {
#130 position: relative;
#131 color: transparent !important;
#132 }
#133 .item-index .character-quick-search h4:after {
#134 position: absolute;
#135 left: 0px;
#136 content: “Location Quick Search”;
#137 color: #767676 !important;
#138 }
#139 .item-index .character-list-item .game-content-image {display: none;}
#140 .item-index .character-list-item .character-info {padding-left: 12px !important;}

Section 1 – Removal

This section is just used to hide away the part of Obsidian Portal I don’t find useful.


#1 .social-share-button,
#2 .maps,
#3 #header .top-bar-section a[href=“/maps/new”],
#4 .forum,
#5 #header .top-bar-section a[href=“/campaign_forum_topics/new”],
#6 .forum-module-container {
#7 display: none !important;
#8 }

Line #1 removes the social icons from the website (this was before I found the button and I haven’t bothered removing it).
Line #2 & #4 removes the menu points Maps and Forum from both the public and private menu bars
Line #3 & #5 removes the same points from the dropdown menu in the top titled “+New”
Line #6 removes the Forum preview from the dashboard

Section 2 – Fixes

This small section makes the character pages the same width as my campaign max width.
Some error causes it to have inital width.


#10 .campaign-public-layout #content {
#11 max-width: 1280px !important;
#12 }

Section 3 – Coloring

Here I color code all the links on the campaign after wikipedia color coding.
More info here.


#15 .main-content a.tag-link {color: #0645AD}
#16 .main-content a.tag-link:visited {color: #0B0080}
#17
#18 .main-content a.wiki-content-link,
#19 .main-content a.wiki-page-link {color: #0645AD}
#20 .main-content a.wiki-content-link:visited,
#21 .main-content a.wiki-page-link:visited {color: #0B0080}
#22 .main-content a.create-wiki-content-link,
#23 .main-content a.create-wiki-page-link {color: #CC2200}
#24 .main-content a.create-wiki-content-link:visited,
#25 .main-content a.create-wiki-page-link:visited {color: #A55858}

Line #15, #18 and #19 are existing content, you haven’t visited before
Line #16, #20 and #21 are pages you have been on before
Line #22 and #23 are not created paged while #24 and #25 are not created pages whose link you have clicked before

Section 4 – Country Table

This table was originally used for countries in my setting, but later became obsolete.
it looks like the tables found on wikipedia, here’s an example.


#29 .country-table {
#30 float:right;
#31 width:33%;
#32 margin:0% 0% 3% 3%;
#33 font-family:arial;
#34 font-size:8pt;
#35 line-height:normal;
#36 border:1px solid black;
#37 border-collapse: collapse;
#38 background: #F9F9F9;
#39 }
#40
#41 .country-table tr:first-child {background-color:#666666 !important;}
#42 .country-table tr:first-child td {
#43 vertical-align:top;
#44 color:white;
#45 text-align:center !important;
#46 }
#47
#48 .country-table tr td {text-align:center; border-top: 1px solid #767676;}
#49 .country-table tr td:first-child {text-align:right;}
#50 .country-table tr.extend td:first-child {text-align:center; border-top: 0px;}

Todo

Section 5 – Footer

This removes the Footer on the private pages

#54	#main-footer { display: none; }

Section 6 – Items

I wanted a place to store location the party discovered while exploring,
but didn’t want to create a wiki page each time and edit some kind of relationship between them.
So I redskin the items page into a locations page.


#59 #header .top-bar-section a[href=“/items/new”] {
#60 color: transparent;
#61 }
#62 #header .top-bar-section a[href=“/items/new”]:after {
#63 position: absolute;
#64 left: 15px;
#65 content: “Location”;
#66 color: rgba(255, 255, 255, 1);
#67 }

Line #59 – #61 takes the original text and makes it transparent, NOT REMOVE, which is important so the links still work.
Line #63 and #64 places a new text element over the old one.
Line #65 then writes the next for the element, and #66 selects a color.

This trick is used over and over again to change the text on the diffrent pages

Section 6.1 – Topbar

This part takes the “New Item” in the dropdown menu and changes is to “New Location”


#59 #header .top-bar-section a[href=“/items/new”] {
#60 color: transparent;
#61 }
#62 #header .top-bar-section a[href=“/items/new”]:after {
#63 position: absolute;
#64 left: 15px;
#65 content: “Location”;
#66 color: rgba(255, 255, 255, 1);
#67 }

Line #59 & #62 find the topmenu element by looking for the “a” element which leads to the item creating page

Section 6.2 – Menu

Here the Menu point is changed so it fits, a new icon is also selected


#70 .op-icon-backpack:before {content:“” !important;}
#71 #dashboard-main-nav .section.items .nav-text {
#72 position: relative;
#73 color: transparent;
#74 }
#75 #dashboard-main-nav .section.items .nav-text:after {
#76 position: absolute;
#77 left: 15px;
#78 content: “Locations”;
#79 color: rgba(255, 255, 255, 0.35);
#80 }

On line #70 I select the backpack icon and change it’s content value in the same way it’s originally placed.
In order the get the value you need, you must look at the ob-generic font used, and take the desired value.
Warning if you write “\e003” in order to get the Map icon the css will break saying you used javascript.
Insted you need to get the character with the value of “\e003”, or look at the bottom of the page for a reference
Line #71 and #75 select the menu item by the .items class

Section 6.3 – Edit

This replaces the edit page for items


#83 .main-section label[for^=“game_item_descrip”],
#84 .main-section label[for=“game_item_name”],
#85 .main-section label[for=“game_item_bio”] {
#86 position: relative;
#87 color: transparent;
#88 }
#89 .main-section label[for^=“game_item_descrip”]:after,
#90 .main-section label[for=“game_item_name”]:after,
#91 .main-section label[for=“game_item_bio”]:after {
#92 position: absolute;
#93 left: 0px;
#94 color: #4D4D4D;
#95 }
#96 .main-section label[for^=“game_item_descrip”]:after {content: “Location Details”;}
#97 .main-section label[for=“game_item_name”]:after {content: "Location “;}
#98 .main-section label[for=”game_item_bio"]:after {content: “Location Lore”;}
#99
#100 form[id^=“edit_game_item_”] .main-section #game_item_name + .row .columns:first-of-type {width: 100%;}
#101 form[id^=“edit_game_item_”] .main-section #game_item_name + .row .columns:last-of-type {display: none;}
#102
#103 form[id^=“edit_game_item_”] .main-section:last-of-type .row .columns {width: 100%;}
#104 form[id^=“edit_game_item_”] .main-section:last-of-type .row .columns .character-avatar {display: none;}

Line #83 searches for the item_description, however you can’t write “script” anywhere, so it has to search for the start instead
Line #84 finds the item_name, and #85 find the item_bio
On line #96-#98 the names for the respective labels are placed
Line #103 makes the text fill the entire width of the page
Line #104 hides the picture

Section 6.4 – Single

Changes the individual page


#107 .item-show .main-content-container {width: 100% !important;}
#108 .item-show .category,
#109 .item-show #sidebar {display: none;}
#110 .item-show [class^=“descrip”] h6,
#111 .item-show .bio h6 {
#112 position: relative;
#113 color: transparent !important;
#114 }
#115 .item-show [class^=“descrip”] h6:after,
#116 .item-show .bio h6:after {
#117 position: absolute;
#118 left: 0px;
#119 color: #232323 !important;
#120 }
#121 .item-show [class^=“descrip”] h6:after {content: “Details”;}
#122 .item-show .bio h6:after {content: “Lore”;}

Line #107 makes the content fill the entire page
Line #108 and #109 hide the sidebar, so there’s more space for content
Line #121 and #122 changes the text for description and bio

Section 6.5 – Index

This changes the index and search fields for items


#125 .item-index .main-content .highlight-container,
#126 .item-index .main-content .character-search-area {display: none;}
#127 .item-index.campaign-game-master .main-content .highlight-container,
#128 .item-index.campaign-game-master .main-content .character-search-area {display: block;}
#129 .item-index .character-quick-search h4 {
#130 position: relative;
#131 color: transparent !important;
#132 }
#133 .item-index .character-quick-search h4:after {
#134 position: absolute;
#135 left: 0px;
#136 content: “Location Quick Search”;
#137 color: #767676 !important;
#138 }
#139 .item-index .character-list-item .game-content-image {display: none;}
#140 .item-index .character-list-item .character-info {padding-left: 12px !important;}

Line #125 and #126 hides the search fields (if you want it)
Line #127 and #128 makes the search fields visible the the gamemaster
Line #139 hides the image
Line #140 expands the title and tag area, since no image is needed

Custom Css

Charred Lands Phratzz Phratzz