Comments with “Newest First” text

Also: Now looking at updating from current 5.3 to 6.4.
On the ‘Themes.php’ page – it shows 6.4, and on hover shows ‘Live Preview’.
I try this and it basically looks OK, but with a few display issues.

Then I notice in its ‘additional CSS’ it has:
——————————–
/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
/* Responsive menu additions*/
#responsive-menu-button {
border-radius: 5px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}
#responsive-menu-container {
opacity: 0.98;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}
.slide-left {
height: 80%;
border-radius: 0 25px 25px 0;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7)
opacity: 0.5;
}
.responsive-menu-item {
border-bottom: 1px solid #111;

}
/* end Responsive menu */
/* Home page AppleLikeDockMenu */
#dock-container {
position: fixed;
bottom: 0;
text-align: center;
right: 10%;
left: 10%;
width: 80%;
background:red; /* temp */

background: rgba(0,255,255,0.2);
border-radius: 10px 10px 0 0;
}
#dock-container li {
list-style-type: none;
display: inline-block;
position: relative;
margin:0;
}

#dock-container li img {
width: 100px; /* was64px; */
height: 64px;
-webkit-box-reflect: below 0 /* was 2px */
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transform-origin: 50% 100%; position:relative;
}

#dock-container li:hover img {
-webkit-transform: scale(2);
margin: 0 2em; margin:0;
z-index:9;
border-radius: 10px 10px 0 0;
}
#dock-container li:hover + li img,
#dock-container li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em; margin:0;
}
#dock-container li.next img { /* doesnt work on prev */
-webkit-transform: scale(1.5);
margin: 0 1.5em; margin:0;
}
#dock-container li span {
display: none;
position: absolute;
bottom: 140px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.75);
padding: 4px 0;
border-radius: 12px;
}
#dock-container li:hover span {
display: block;
color: #fff;
}

/* End AppleLikeDocMenu */
—————————————

Which is slightly? different from the Additional CSS in my 5.3 version:
/*
You can add your own CSS here.
*/

/* for the Title */
.logo h1 {
font-style: italic; text-shadow: #ffffff 2px 0px 0px, #ffffff 1.75517px 0.958851px 0px, #ffffff 1.0806px 1.68294px 0px, #ffffff 0.141474px 1.99499px 0px, #ffffff -0.832294px 1.81859px 0px, #ffffff -1.60229px 1.19694px 0px, #ffffff -1.97998px 0.28224px 0px, #ffffff -1.87291px -0.701566px 0px, #ffffff -1.30729px -1.5136px 0px, #ffffff -0.421592px -1.95506px 0px, #ffffff 0.567324px -1.91785px 0px, #ffffff 1.41734px -1.41108px 0px, #ffffff 1.92034px -0.558831px 0px, 0px 0px 6px blue !important;
}
.nav-head { background-color: #336699;}
h5 {font-weight:bold;}
h2 {
font-size: 1em;
line-height: 1.5em;
font-weight:bold;
}

#responsive-menu-button {
border-radius: 4px;
background-color: rgba(0,0,0,.6)
!important;
box-shadow: 5px 10px 5px
rgba(0,0,0,.4);
}

#responsive-menu-container {
box-shadow: 5px 10px 10px
rgba(0,0,0,.4);
border-radius: 0 0 16px 0 ;
height:80%;
}

/* override basic version of responsive menu */
.menu-item { padding:0 6px !important;}
.menu-item:hover {background-color:#1a57ba !important;}
#responsive-menu li {margin-left:-20px !important; list-style:none !important; padding-left:0 !important;}
/* –end of overrides — */
.coloured { color:#042860;}
.bold { font-weight:bold;}

/* === to display AMBADGE with text === */
/* <!–
.logo {background-image: url(“https://www.v12vanquish.com/wordpress/wp-content/uploads/2017/06/AmLogoShad.png&#8221;); background-repeat: no-repeat;
background-position: left;
background-size: 160px 50px;
}
–> */
/* END */

@media screen and (max-width: 800px) {
.logo {
font-size:8pt;
}
.logo {background-size: 25%; background-position: top left;}
}

/* === for the Apple-like Dock effect ===*/
#dock-container {
position: relative; /*fixed;*/
bottom: 0;
text-align: center;
right: 0%;
left: 0%;
width: 100%;

background: rgba(0,255,255,0.2);
border-radius: 10px 10px 0 0;
}
#dock-container li {
list-style-type: none;
display: inline-block;
position: relative;
margin:0; /* temp */
}

#dock-container li img {
width: 100px; /* was64px; */
height: 64px;
-webkit-box-reflect: below 0 /* was 2px */
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transform-origin: 50% 100%; position:relative;
}

#dock-container li:hover img {
-webkit-transform: scale(2);
margin: 0 2em; margin:0; z-index:9; border-radius: 6px 6px 0 0;
}
#dock-container li:hover + li img,
#dock-container li.prev img {
-webkit-transform: scale(1.4); z-index:8; border-radius: 6px 6px 0 0;
margin: 0 1.5em; margin:0;
}
#li2:hover ~ #li1 img
{
-webkit-transform: scale(1.4); z-index:8; border-radius: 6px 6px 0 0;
margin: 0 1.5em; margin:0;
}

#dock-container li span {
display: none;
position: absolute;
bottom: 140px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.75);
padding: 4px 0;
border-radius: 12px;
}
#dock-container li:hover span {
display: block;
color: #fff;
}
/* END */
————————

Question – how is this CSS generated? Why is it different to the original?
How should I proceed?
AND Thanks for a GREAT theme !

Hi,

About your first post, to add this you should change theme file “comments” and I don’t recommend this.

About your second post, this additional CSS is not meant for my theme only. For example, I don’t know what the #responsive-menu-button or #dock-container is. Maybe from another theme or an installed plugin?
This is so called Custom CSS, it overrides the original CSS of a theme and/or plugin.

And there’s a conflict between my stylesheet and another stylesheet that is being used at your site, Bootstrap. For example, there’s too much whitespace between content and sidebar section and there’s some whitespace at right side. I notice it’s part of the Fade slider plugin, if you don’t need that, please remove it.

If you want, I can help you to fix these issues.

Guido

Regarding my comment:

For example, I don’t know what the #responsive-menu-button or #dock-container is.

Found it.. The #dock-container ID is for the advertisement in the footer of your website.
The #responsive-menu-button is for the mobile menu. FYI: my theme also has a mobile menu, but not as fancy as that one.

Regarding your comment:

Which is slightly? different from the Additional CSS in my 5.3 version:

Your “5.3 version” contains few classes from my theme such as .logo h1 and .nav-head.

Guido