The Great CoP Migration HTML/CSS Dump

by **Zhu Yang** 2017-09-22, 14:32

#content in global.css changes the background color:

#content {
background: #060807; <-- changing to 060807 makes the background black
width: auto !important;
padding: 20px 10px;
overflow: hidden;
}

by **Zhu Yang** 2017-09-22, 14:52

To edit/change legend icons, go to:

Templates & Style > Templates > Select your theme > Index Page Templates > index >

Tutorial timestamp 7:46 - https://www.youtube.com/watch?v=8Pg8kb4x0hc

by **Zhu Yang** 2017-09-22, 15:43

This guy goes over how to use Firefox Inspect tool to changes settings on the fly without saving css files:

https://www.youtube.com/watch?v=rrnO6XGG7fQ

by **Zhu Yang** 2017-09-22, 17:04

Using Firefox inspect tool, track changes in global.css:

#content {
background: #060807; <-- changing to 060807 makes the background black
width: auto !important;
padding: 20px 10px;
overflow: hidden;
}

.navigation .active {
color: #f4f8f7;
font-size: small;
font-weight: bold;
}

.tborder {
background: #e5c920; <-- changes inner part of border to dark gold
width: 100%;
margin: auto auto;
border: 1px solid #fafd92; <-- changes outer part of table border to light gold for gradient effect
padding: 1px;
}

.thead {
background: #0f0f0f url(../../../images/Test/thead.png) repeat-x; <- use new thead.png, which is the old tcat.png
color: #fff;
border-bottom: 1px solid #263c30;
border-bottom-color: rgb(38, 60, 48);
padding: 8px;
}

.thead a:link {
color: #fff; <-- changes color of category links to white
text-decoration: none;
}

.tcat {
background: #0f0f0f url(../../../images/Test/tcat.png) repeat-x; <-- use the new tcat image
color: #070908;
border-top: 1px solid #444;
border-bottom: 1px solid #000;
padding: 6px;
font-size: 12px;
}

Here are the color values for new tcat image, from lightest to darkest:
1: fafd92
2: f2ef64
3: eede4a
4: e3ca27
< e5c308
< e5b609
< e5ad00

When creating the tcat image:
1. Open existing tcat.png in Photoshop
2. Flip vertically
3. Follow pattern, replacing each pixel's existing color with new ones
4. Go in Dark -> Light order

by **Zhu Yang** 2017-09-25, 13:54

2017-09-25 NEW PARADIGM

Straight rip from eternal forums - https://eternal.is/index

span.logo.text a h1, #menu-header, .thead, .navigation {
border-bottom-color: #e5c920; <-- for gold bottom border
}

.tborder {
width: ~~100%~~ 80%; <-- change from 100% to 80% for aesthetics
margin: auto auto;
border-radius: 0;
overflow: hidden;
background: #1A1A1A;
box-shadow: 0 0 8px -2px #0f0f0f;
}

.navigation {
color: #888;
font-size: 13px;
margin: auto;
padding: 10px;
background: #222;
text-align: left;
box-sizing: border-box;
border-bottom: 1px solid #292929 !important;
width: 80%; <-- add this line to make width 80% for nav bar
}

.menu {
border-bottom: 1px solid #111;
padding: 0 15px;
margin: 0;
background: rgb(56,56,56);
background: -moz-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(37,37,37)),color-stop(100%,rgba(31,31,31)));
background: -webkit-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%);
background: -o-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%);
background: -ms-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%);
background: linear-gradient(to bottom,rgb(37,37,37) 0%,rgb(31,31,31) 100%);
text-align: center;
overflow: hidden;
width: 80%; <-- add this
margin: auto; <-- add this
}

by **Zhu Yang** 2017-09-25, 14:36

ACTUALLY, the div class="fullwrap" is what controls eternal's width on all of it's sections. that's the only width I should have to change:

.fullwrap, .fullwrap-1 {
width: 90%;
}

Here's the full HTML dump:

Code:: <head> <title>Eternal - Technology </title> <link rel="alternate" type="application/rss+xml" title="Latest Threads (RSS 2.0)" href="https://eternal.is/syndication.php"> <link rel="alternate" type="application/atom+xml" title="Latest Threads (Atom 1.0)" href="https://eternal.is/syndication.php?type=atom1.0"> <meta name="google-site-verification" content="4_8hPIUkkQc8Ztzl8MnN6IPMFmtugOGdkd-V0pCPlUo"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> <link href="/fonts.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="theme-color" content="#4e3283"> <meta name="msapplication-navbutton-color" content="#4e3283"> <meta name="apple-mobile-web-app-status-bar-style" content="#4e3283"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://eternal.is/jscripts/jquery.plugins.min.js"></script> <script type="text/javascript" src="https://eternal.is/jscripts/general.js"></script> <script type="text/javascript" src="https://eternal.is/jscripts/jquery.lazyloadxt.extra.min.js"></script> <script type="text/javascript" src="https://eternal.is/jscripts/features.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script> <script>$.lazyLoadXT.autoInit = false;</script> <link rel="icon" type="image/png" href="/infinity.png"> <style> body { background-image: url('/pagebg.png'); } .logo { background-image: url('/headerbg.jpg'); } </style> <link type="text/css" rel="stylesheet" href="https://eternal.is/cache/themes/theme7/css3.min.css?1471287750"> <link type="text/css" rel="stylesheet" href="https://eternal.is/cache/themes/theme11/global.min.css?1497251182"> <link type="text/css" rel="stylesheet" href="https://eternal.is/cache/themes/theme1/thread_status.min.css?1458524448"> <link type="text/css" rel="stylesheet" href="https://eternal.is/cache/themes/theme1/star_ratings.min.css?1458524448"> <link type="text/css" rel="stylesheet" href="https://eternal.is/cache/themes/theme1/mentionme.min.css?1458902945"> <link type="text/css" rel="stylesheet" href="https://eternal.is/cache/themes/theme11/features.min.css?1497250979"> <link href="/themesettings.php" rel="stylesheet" type="text/css"> <script type="text/javascript"> lang.unknown_error = "An unknown error has occurred."; lang.select2_match = "One result is available, press enter to select it."; lang.select2_matches = "{1} results are available, use up and down arrow keys to navigate."; lang.select2_nomatches = "No matches found"; lang.select2_inputtooshort_single = "Please enter one or more character"; lang.select2_inputtooshort_plural = "Please enter {1} or more characters"; lang.select2_inputtoolong_single = "Please delete one character"; lang.select2_inputtoolong_plural = "Please delete {1} characters"; lang.select2_selectiontoobig_single = "You can only select one item"; lang.select2_selectiontoobig_plural = "You can only select {1} items"; lang.select2_loadmore = "Loading more results…"; lang.select2_searching = "Searching…"; var cookieDomain = ".eternal.is"; var cookiePath = "/"; var cookiePrefix = ""; var deleteevent_confirm = "Are you sure you want to delete this event?"; var removeattach_confirm = "Are you sure you want to remove the selected attachment from this post?"; var loading_text = 'Loading. <br />Please Wait..'; var saving_changes = 'Saving changes..'; var use_xmlhttprequest = "1"; var my_post_key = "92e6fa5cb3b1ea900484195d0e825b86"; var rootpath = "https://eternal.is"; var imagepath = "https://eternal.is/images2"; var yes_confirm = "Yes"; var no_confirm = "No"; var MyBBEditor = null; var spinner_image = "/loader.gif"; var spinner = "<img src='" + spinner_image +"' alt='' />"; var modal_zindex = 9999; </script> <script type="text/javascript"> jQuery(document).ready(function(){ var forums_on_page = []; jQuery("#content").children("a.foruma").each(function(){ forums_on_page.push( jQuery(this).attr("name").split(".")[1] ); }); }); </script> <link rel="alternate" type="application/rss+xml" title="Latest Threads in Technology (RSS 2.0)" href="https://eternal.is/syndication.php?fid=8"> <link rel="alternate" type="application/atom+xml" title="Latest Threads in Technology (Atom 1.0)" href="https://eternal.is/syndication.php?type=atom1.0&fid=8"> <script type="text/javascript">  </script> <script type="text/javascript" src="https://eternal.is/jscripts/jeditable/jeditable.min.js"></script> <script type="text/javascript" src="https://eternal.is/jscripts/inline_edit.js?ver=eternal"></script> <meta name="description" content="The place to talk about tech and other nerd stuff."> <link rel="canonical" href="https://eternal.is/forum/technology"> </head>

by **Zhu Yang** 2017-09-25, 15:30

The shit that's not matching up with eternal.is (or at least the most egregious differences), are the fucked up organization on the header and footer

I've isolated those components to be referenced by

{$header}
and
{$footer},

which I believe are in the Header and Footer template groups

I did this by editing the calendar template and cutting out stuff until only the header and footer showed up.

by **Zhu Yang** 2017-09-25, 15:39

I'm looking at the header template right now. I need to find out where:
{$menu_portal}
{$menu_search}
{$menu_memberlist}
{$menu_calendar}

are defined

The good thing about having everything in a header template, is that I don't have to change it on multiple files.

I should make a list of the templates with items I need to change/reorder.

by **Zhu Yang** 2017-09-25, 16:09

TODO:

Try and copy over their navigation bar style by editing the navigation template.

Check out sun_header.png, sun_tcat.png, and sun_thead.png under Images

by **Zhu Yang** 2017-09-25, 17:05

How the fuck does nav bar work - https://community.mybb.com/thread-67435-post-486176.html

Change how breadcrumbs are displayed - https://community.mybb.com/thread-118766.html

MyBB Guides:
https://community.mybb.com/thread-33809.html
https://community.mybb.com/showthread.php?tid=5933

by **Zhu Yang** 2017-09-29, 19:37

What do each of the Templates do? - https://docs.mybb.com/1.8/development/themes/templates/

by **Zhu Yang** 2017-10-01, 23:20

After comparing the global.min.css of eternal.is with our global.css:

I noticed the .fullwrap and .fullwrap-1 classes are similar to our .wrapper class, so I tried adding the following properties from eternal.is to ours:

.fullwrap {
box-shadow:0 4px 5px rgba(0,0,0,0.5);
position:relative;
z-index:2
}
.fullwrap,.fullwrap-1 {
width:80%;
margin:0 auto
}

Here's a before and after shot:
Before - https://imgur.com/UCCWbdI
After - https://imgur.com/H3kfJuM

EDIT:
THIS MAY CAUSE FLOATING EDIT OPTIONS AFTER CLICKING EDIT BUTTON: - https://imgur.com/FXU3vI2
^^^ Issue pinpointed: it was because of the highlighted line:
.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
/* from eternal.is (global.min.css) */
box-shadow:0 4px 5px rgba(0,0,0,0.5);
position:relative; <-- this line causes the Edit menu to float
/* z-index:2 */

}

by **Zhu Yang** 2017-10-02, 13:51

Force classic mode on users? - https://community.mybb.com/thread-40093.html

by **Zhu Yang** 2017-10-03, 14:46

I tried to add padding to make it so the drop-shadow on .wrapper class wasn't right on top of the forum tables.

The tables look OK now, but, the banner and header use the .wrapper class too, and look bloated https://imgur.com/ACSMQex e5c920 - The Great CoP Migration HTML/CSS Dump ACSMQex

e5c920 - The Great CoP Migration HTML/CSS Dump ACSMQex

I'll need to restructure them

.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
/* from eternal.is (global.min.css) */
box-shadow:0 4px 5px rgba(0,0,0,0.5);
/* position:relative;
z-index:2 */
/* New padding properties */
padding: 50px; <-- newly added

}

by **Zhu Yang** 2017-10-03, 15:08

Actually, the better solution is probably to add margin to all the elements that need it. For example:

.tborder {
background: #fff;
width: 96%; /* changed from 100% */
/* Old value
margin: auto auto; */
margin: 2%;
border: 1px solid #ccc;
padding: 1px;
}

by **Zhu Yang** 2017-10-07, 20:53

Let's move the nav items to the center where they should be

In global.css:

#logo ul.top_links {
font-weight: bold;
text-align: center; /* Changed from align right to center */
margin: -10px 5px 0 0;
}

e5c920 - The Great CoP Migration HTML/CSS Dump QwfjdJy

e5c920 - The Great CoP Migration HTML/CSS Dump QwfjdJy

by **Zhu Yang** 2017-10-07, 21:19

Center logo image (this may render the above global.css change redundant) <-- TEST THIS:

Templates > template name > header

Use inline css to center content in the wrapper:

style="text-align: center"

Also, add 2
below logo to stop overlapping with the menu nav links

Code:: <div id="container"> <a name="top" id="top"></a> <div id="header"> <div id="logo"> <div class="wrapper" style="text-align: center"> <a style="margin:auto;" href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>  <br /> <br /> <ul class="menu top_links"> {$menu_portal} {$menu_search} {$menu_memberlist} {$menu_calendar} <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li> </ul> </div> </div>

by **Zhu Yang** 2017-10-07, 21:23

TODO:

Add some right-hand side margin to:
class="float_right"
&
class="float_left"

to align the Post Thread buttons with the forums

e5c920 - The Great CoP Migration HTML/CSS Dump SIASZUt

e5c920 - The Great CoP Migration HTML/CSS Dump SIASZUt

by **Zhu Yang** 2018-02-11, 21:44

Update 2018-02-11

Tried modifying showthread.php (located in public_html), as recommended by the above link:
https://community.mybb.com/thread-205404.html

Code:: $parser_options = array( "allow_html" => $forum['allowhtml'], "allow_mycode" => $forum['allowmycode'], "allow_smilies" => $forum['allowsmilies'], "allow_imgcode" => $forum['allowimgcode'], "allow_videocode" => $forum['allowvideocode'], "filter_badwords" => 1, "shorten_urls" => "" );

DOESN'T WORK. Browsing forums is OK, but opening a thread brings up a blank white page.

by **Zhu Yang** 2018-02-11, 21:44

Update (SUCCESS)
It seems the common advice is to change class_parser.php:
https://community.mybb.com/thread-122841-post-887512.html#pid887512
http://mybbhacks.zingaburga.com/archive/index.php/thread-631.html

modified class_parser.php (in public_html > inc)

Code:: if($name == $url && (!isset($this->options['shorten_urls']) || !empty($this->options['shorten_urls']))) { $name = htmlspecialchars_decode($name); if(my_strlen($name) > 55) { // $name = my_substr($name , 0, 40).'...'.my_substr($name , -10); // do not shorten URLS } $name = htmlspecialchars_uni($name); }

by **Zhu Yang** 2018-02-12, 23:13

eternal.is CSS Analysis:

in their global.css file, there's a class that controls the highlighted component

e5c920 - The Great CoP Migration HTML/CSS Dump RD2El6h

e5c920 - The Great CoP Migration HTML/CSS Dump RD2El6h

Code:: .menu { border-bottom: 1px solid #111; padding: 0 15px; margin: 0; [strike] background: rgb(56,56,56); background: -moz-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(37,37,37)),color-stop(100%,rgba(31,31,31))); background: -webkit-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%); background: -o-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%); background: -ms-linear-gradient(top,rgba(37,37,37) 0%,rgba(31,31,31) 100%);[/strike] background: linear-gradient(to bottom,rgb(37,37,37) 0%,rgb(31,31,31) 100%); // ^^ background: linear-gradient controls the appearance of their menu bar text-align: center; overflow: hidden; }

background: linear-gradient controls the appearance of their menu bar

For example, if I change it to:

Code:: background: linear-gradient(to bottom,rgb(210, 28, 28) 0%,rgb(31,31,31) 100%);

you get the following image:

e5c920 - The Great CoP Migration HTML/CSS Dump 2jiJ2aU

in our 000webhost css it's:
#header ul.menu @ global.css:66

More of our elements depend on .menu than in eternal.is, as seen in this image:
e5c920 - The Great CoP Migration HTML/CSS Dump JqCKr1J

e5c920 - The Great CoP Migration HTML/CSS Dump JqCKr1J

(also, another menu in the bottom)

This is what happens when we apply it to near-vanilla 000webhost:
e5c920 - The Great CoP Migration HTML/CSS Dump 24sNBkK

e5c920 - The Great CoP Migration HTML/CSS Dump 24sNBkK

by Sponsored content

The Great CoP Migration HTML/CSS Dump

The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump

Re: The Great CoP Migration HTML/CSS Dump