Church of ProZ: Otaku Fortress
Would you like to react to this message? Create an account in a few clicks or log in to continue.

The Great CoP Migration HTML/CSS Dump

Go down

The Great CoP Migration HTML/CSS Dump Empty The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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;
}
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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
}
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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">
<!--
lang.no_new_posts = "Forum Contains No New Posts";
lang.click_mark_read = "Click to mark this forum as read";
lang.inline_edit_description = "(Click and hold to edit)";
lang.post_fetch_error = "There was an error fetching the posts.";
// -->
</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>
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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.
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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.
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 2017-09-29, 19:37

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

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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 */

}


Last edited by Zhu Yang on 2017-10-02, 16:07; edited 2 times in total
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 2017-10-02, 13:51

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

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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 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

}
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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;
}
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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;
}

The Great CoP Migration HTML/CSS Dump QwfjdJy
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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>
 <!-- Add the <br /> to separate menu links -->
 <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>
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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


The Great CoP Migration HTML/CSS Dump SIASZUt
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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.
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 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);
 }
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Zhu Yang on 2018-02-12, 23:13

eternal.is CSS Analysis:

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

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:

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:
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:
The Great CoP Migration HTML/CSS Dump 24sNBkK
Zhu Yang
Zhu Yang
Archon
Archon

ProZ Degrees: Nasuverse Master
Posts : 2107
AwesomeSauce : 9

Back to top Go down

The Great CoP Migration HTML/CSS Dump Empty Re: The Great CoP Migration HTML/CSS Dump

Post by Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum