Main site construction?

For tech wizards and n00bs alike. Questions, answers, or just general hoo-haa.

Moderator: Moderators

Post Reply
Message
Author
Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Main site construction?

#1 Post by Dazreiello »

Hello, sorry if me just saying Im working on a website counts as advertisement, I will not give out the url or any names of this site Im working on but I wanted to use some of the ideas used in the main comic site's webpages to fully understand how I can do them then edit them on a web builder like Divi. At the moment my eyes are set on the Archive page and how it seems to work with toggles but I cant really fathom how it seems to have hover-over dynamics or having the hover-over simply appear as a box over the thumbnails in the mobile version of the site. If anyone could help me I'd greatly appreciate it, but if its a trade secret or some such I'll understand too.

User avatar
Turaiel
Administrator
Posts: 347
Joined: Wed Nov 10, 2010 3:32 am
Location: Ann Arbor, MI, USA
Fav. Twokinds Character: Natani
Contact:

Re: Main site construction?

#2 Post by Turaiel »

Good question! Let me start by saying, IMO, there is no such thing as a trade secret in web devleopment. Everything is exposed in the developer tools if you know what to look for.

Let's start with the HTML used to display the list of page links and the links themselves. This is slightly modified from the actual HTML though because we're using Jekyll templating and a Javascript library to lazy load the images to prevent excessive data usage and browser slowdown.

Code: Select all

<section class="chapter">
	<aside class="chapter-links">
		<!-- ... -->
		<a href="https://twokinds.keenspot.com/comic/6">
			<span>6</span>
			<img src="https://example.com/image.png">
		</a>
		<!-- ... -->
	</aside>
</section>
The use of section and aside tags isn't really important here. They're just semantic tags that help the browser understand what type of content they hold for things like screen readers and reading mode.

Next let's look at the CSS that is used for this effect. Again, unnecessary bits that are specific to our site have been cleaned up here. I'll explain the purposes of important things as comments below. Note that there's a lot in here and it's not super obvious you need to scroll.

Code: Select all

.chapter-links {
	margin-left: 8px;
	margin-right: 8px;
}

/* The link wrapping the whole page */
.chapter-links a {
       /*
       By default, <a> tags are displayed as inline elements, limiting what styles can be applied to them (width and height can't be used). This changes that to a hybrid display type.
       More info on inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
       */
	display: inline-block; 
	
	width: 50px;
	height: 65px;
	background-color: #eee;
	text-decoration: none;
	color: #000;
	font-size: 1.2em;
	position: relative;
	margin-right: 3px;
	margin-bottom: 3px;
	
	/* This prevents any text or images from escaping the boundary of the 50x65 box we've made. */
	overflow: hidden;
}

/* Page number display */
.chapter-links a span {
	/* By default span is only as wide as its content. We need it to fill the whole width of the box though. */
	width: 100%;
	
	text-align: center;
	padding-top: 22px;
	
	/* This section ensures the top left of the span is aligned with the top left of the box containing it. This prevents it from trying to render next to the image instead of in front of it. */
	position: absolute;
	top: 0;
	left: 0;
	
	/* We want the span to appear on top of the thumbnail image. */
	z-index: 100;
	
	/*
	The default browser box sizing (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) adds padding into the width and height calculations, so we subtract it here.
	You can probably get around this by setting "box-sizing: border-box".
	*/
	height: calc(100% - 22px);
	
	/* Transparent black background */
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	
	/* We want the page number to be hidden by default. */
	display: none;
}

.chapter-links a:hover span {
	/*
	When the hover is happening, we change the span display from none to inline-block.
	span is another one of those elements that's inline by default, so we want to use the hybrid inline-block to get width and height to work.
	*/
	display: inline-block;
}

/* The thumbnail image */
.chapter-links a img {
	/* This scales down the image so that it fits fully inside the box containing it. */
	object-fit: contain;
	max-width: 100%;
	
	/* The image, like the span, has to be aligned with the top left of the box so that it doesn't render next to the span but rather behind it. */
	position: absolute;
	top: 0;
	left: 0;
	
	/* This number is less than the one given to the span, so it will appear behind it. */
	z-index: 90;
}

/* The following CSS only applies to devices with small screens (i.e. phones) */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 2) {
 
 	/* Just for the sake of making the boxes large enough to tap. */
 	.chapter-links a {
		zoom: 1.8;
	}

	/* This overrides the behavior we set up above. It's visible by default, doesn't have its full height anymore, removes the padding, and moves it to the bottom of the thumbnail. */
	.chapter-links a span {
		display: inline-block;
		height: auto;
		padding-top: 0;
		bottom: 0;
		
		/* Since we specifically set top before and we don't want it to be set anymore, we set it to inherit. https://developer.mozilla.org/en-US/docs/Web/CSS/inherit */
		top: inherit;
	} 
 }
Here's a JSFiddle link that you can use to tinker with the HTML and CSS that I've laid out: https://jsfiddle.net/Turaiel/d6nc3s1w/6/

I know that's a lot to take in. I'm not sure of your skill level right now so I included links to documentation for topics you might not have a good grasp on. Please feel free to ask me any questions you might have!
Website Administrator

Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Re: Main site construction?

#3 Post by Dazreiello »

Thank you so much! and for considering my skill level, these links are a great help, and this whole thing is pretty comprehensive. Well I say that but I have pretty bad ADHD so learning things is a bit difficult for me but Im trying my best! Ill look this over and see if I can gather something from it before I post any other question. I might ask more about other pages in the near future if thats okay, but otherwise I am kinda fixated on this concept for my own thumbnail based navigation. Again Ill reply again with a more proper question once Ive tinker around with this, especially with the jsfiddle link you gave.

EDIT:
Ok, If I were to use Wordpress (and Divi as the builder) Do you know off the top of your head how I would get the CSS for the thumbnails to lead to the page post? I dont seem to see a way things are linked other than in the HTML but idk how the two link together, also as far as them being in a "toggle module" or sorts where the thumbnails come in a dropdown, how is that made?

Yeah I'll admit my experience is extremely low but I'm doing me best to get it without needing you to basically do it all for me. But yeah since I've been mostly using a builder, coding is off my hands and I don't know exactly how it's all applied, like, in the css, what in there calls the specific comic pages and such? I'm blind when it comes a lot of it and I'm sorry ^^;...

User avatar
Turaiel
Administrator
Posts: 347
Joined: Wed Nov 10, 2010 3:32 am
Location: Ann Arbor, MI, USA
Fav. Twokinds Character: Natani
Contact:

Re: Main site construction?

#4 Post by Turaiel »

Dazreiello wrote: Sun Mar 12, 2023 10:00 pm Ok, If I were to use Wordpress (and Divi as the builder) Do you know off the top of your head how I would get the CSS for the thumbnails to lead to the page post?
You'd need to do this in HTML. CSS is only intended for style, and there's no guarantee the user browsing your website will have CSS enabled (but it's pretty likely they will). I've never used either of those tools so I don't know anything specific.
Dazreiello wrote: Sun Mar 12, 2023 10:00 pm also as far as them being in a "toggle module" or sorts where the thumbnails come in a dropdown, how is that made?
This uses JavaScript. Our implementation uses a cookie to remember which sections were expanded for next time you load the page, but this isn't really necessary for your use. There are some resource on creating collapsible containers around the internet. One I found off the bat is here: https://www.w3schools.com/howto/howto_j ... psible.asp

Note that the first example uses a similar trick as in my previous post where it toggles the display property between "none" and "block" (not "inline-block" since that isn't appropriate for this use case). The second example on this page shows how to do an animated collapsible using CSS animation. That one manipulates the height of the box instead of hiding/showing it.

Where the examples use <style> tags, just put that content in your page CSS instead. When you use <script> tags they usually go at the bottom of your <body> block so that they don't run until the page is fully loaded. As an alternative (this is preferred actually), your JavaScript that needs to attach event handlers (such as click) should go inside a DOMContentLoaded event handler.
Website Administrator

Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Re: Main site construction?

#5 Post by Dazreiello »

Alright, I think Im already starting to make a lot of progress!! I figured out my main issue here that blocked me from understanding, Wordpress by default doesnt allow you to add custom code that isnt just CSS so I needed to install a plug in to allow HTML and JS scripts. Ill play around with it little by little, Ill post again if I need more help with this (After you reply of course so I dont double post).

My second fixation is the main comic page and its navigation. Does it work in any sort of more efficient way than just inserting identical Next/Previous buttons in every post that lead to the next or previous post via a url link?

EDIT: Playing around with it, I cant seem to get the Desktop version black background to be like the mobile's somehow. I kinda want them to always have the title displayed instead of only on hover but without the black box being completely over the whole thumbnail. I'm trying a lot of different methods and looking up what I might be doing wrong but I might be overlooking something.

User avatar
Turaiel
Administrator
Posts: 347
Joined: Wed Nov 10, 2010 3:32 am
Location: Ann Arbor, MI, USA
Fav. Twokinds Character: Natani
Contact:

Re: Main site construction?

#6 Post by Turaiel »

Dazreiello wrote: Wed Mar 15, 2023 1:45 pm My second fixation is the main comic page and its navigation. Does it work in any sort of more efficient way than just inserting identical Next/Previous buttons in every post that lead to the next or previous post via a url link?
With WordPress people tend to use a plugin called ComicPress for that sort of thing. Our case is a bit special. We use Jekyll which allows us to specify templates that get used on every page and it just fills in the correct details based on that page's comic.
Website Administrator

Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Re: Main site construction?

#7 Post by Dazreiello »

Oh that's cool. Yeah comic press unfortunately doesn't get updated much and hasn't been updated, last I checked, since a couple years. The person hosting my site for me didn't recommend it for that reason, says it weakens my sites security.

EDIT: Yea, looks like Im on my own on that one, bummer, but Ill figure something out, thanks so much for all your help! Im still trying to figure out how to simplify the thumbnail titles to be like the mobile ones as it seems to be stubborn but Ill try to figure that out if Ive been asking for too much adjustment!

EDIT: Looks like Divi comes with a primitive Nav module that'll do the job for now, Just a prev and next button, had to add an archive button myself but it works nonetheless!

EDIT: I kinda solved my issues about the thumbnail title, It needs to stay at the top though to work for me, but Ill chip away at it some more another time perhaps.

I have some other questions actually if I havent been a pester so far! If Ive already taken too much of your time these have been the most important things I was wondering so thank you for helping me with them!

Ooo now I've figured out how to have multiple collapses in the same page on my own!

User avatar
Turaiel
Administrator
Posts: 347
Joined: Wed Nov 10, 2010 3:32 am
Location: Ann Arbor, MI, USA
Fav. Twokinds Character: Natani
Contact:

Re: Main site construction?

#8 Post by Turaiel »

It's easier if you just ask your questions instead of saying you have more questions. You'll get answers more quickly that way.
Website Administrator

Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Re: Main site construction?

#9 Post by Dazreiello »

That's true, I just get self conscious about asking too many and wasting people's time, especially if I assume they're a busy person.

Anywho how do you set up little banners so people who I might somewhat partner with can post the code on their own site and advertise my site while I do the same for them. Does that take a plug-in to create varying sized banners or is it simpler than I think?.. I just see the two kinds banners in the links menu and see there's like html and bbcode options when clicked.


Oh and incase you HAPPEN to know a trick to this. I'm trying to use fooGallery as a gallery plug in for my artwork but I realize unless each new drawing is a default post page I can't link toward the "latest entry" for it. Is there any tricks to call on a plugin's posts so I can have a "latest post" blog on the front page?

User avatar
Turaiel
Administrator
Posts: 347
Joined: Wed Nov 10, 2010 3:32 am
Location: Ann Arbor, MI, USA
Fav. Twokinds Character: Natani
Contact:

Re: Main site construction?

#10 Post by Turaiel »

For the first question, I don't have a simple answer that it won't take me a lot of time to explain. The way it's done on the site now is outdated. Honestly that whole feature is outdated. I doubt anyone actually uses it so it probably isn't worth implementing.

As long as you provide an image that people can link to, it's trivial for them to write the HTML themselves.

If you really want to run with it, look up how to create a modal dialog in JavaScript. It would also be helpful to understand data attributes and template strings to generate the HTML to display.

As for your second question, I haven't got a clue.
Website Administrator

Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Re: Main site construction?

#11 Post by Dazreiello »

Gotcha, I won't bother with it then. Thanks so much for the help! Actually... I think that's all I have, You've thoroughly explained everything I was so eager to learn about and I thank you for your time! I wish there was a way I could repay you. Perhaps I can add you to a list of special credits on my journey toward making an at least decent living on my creations. Any info in particular you'd want to add about you when/wherever I decide to post these special credits?

User avatar
Turaiel
Administrator
Posts: 347
Joined: Wed Nov 10, 2010 3:32 am
Location: Ann Arbor, MI, USA
Fav. Twokinds Character: Natani
Contact:

Re: Main site construction?

#12 Post by Turaiel »

Haha no you don't need to do anything
Website Administrator

Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Re: Main site construction?

#13 Post by Dazreiello »

Hmm it might be a bit much to ask but can I get a little help to try and understand the elements in this CSS and how I can manipulate it to what I want?

Code: Select all

.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
}
That is how I have the code Im trying to use right now for a vertical menu. The Menu Module or button Im using for it is classed .et-vert-menu.
Here's some additional CSS I put on the module itself.

Menu Link

Code: Select all

background-image: url(https://dazreiello.xyz/wp-content/uploads/Site_Assets/Series-Button-bg.png);
background-size: 180px 78px;
width: 180px;
height:78px;
padding-top: 28px;
padding-left: 40px;
Dropdown Menu Container

Code: Select all

width: 350px;
height: 100px;
Dropdown Menu Links

Code: Select all

background-color: #00000000;
background-image: none;
font-size: 18px;
width: 500px;
height: 20px;
This is the result so far.
https://imgur.com/nOMM5r2

My problem I'm trying to solve is that when I select the items in the vertical menu my cursor needs to be just above the item instead of over it. And the arrow icon that indicates that "Demons through Darkness" Has a child menu is waaaay off.

I know you dont have experience with things like divi but I hoped by presenting the code Im using you'd have some idea of what Im talking about...

User avatar
Turaiel
Administrator
Posts: 347
Joined: Wed Nov 10, 2010 3:32 am
Location: Ann Arbor, MI, USA
Fav. Twokinds Character: Natani
Contact:

Re: Main site construction?

#14 Post by Turaiel »

Again, no experience with any sort of site builder like Divi here. Unfortunately CSS doesn't tell me much. I would need to also see the HTML to understand how it comes together, otherwise I can only guess.
Website Administrator

Dazreiello
Newbie
Posts: 8
Joined: Sun Mar 12, 2023 11:16 am
Fav. Twokinds Character: Adira Riftwall

Re: Main site construction?

#15 Post by Dazreiello »

I see, darn, yea I guess I should have figured given what you already told me. Im still experimenting with it, so eventually Ill figure it out I suppose!

Post Reply