erintheunready / ComicControl

The main repo for ComicControl Development.
25 stars 8 forks source link

Images not popping up + sidebar #13

Closed therealNAAN closed 2 years ago

therealNAAN commented 3 years ago

Hello! I had to sign up for a github account because the Mail Delivery Subsystem said that the feedback email doesn't exist ^^; So I'm sorry if this post looks wonky.

I've been working with the CMS for my site and it's been splendid. However, I'm having some issues with the images not appearing once I click next or previous from the homepage. The color styling for my blog's title also changes when you click away from the homepage.

When I land on the page when I land on the page when I land on the page2

When I click away from the homepage, whether through the next or previous button when I click next or previous when I click next or previous2

I also had a question about sidebars. I've been trying to code it in the comicpage.php but the site borks anytime I try to edit it (I guess because it's all divs and not php code?) Is there some template or code I'm missing? (I see nothing on the Comic Control page about it, as far as I can read.)

Any help is appreciated. Thank you!

therealNAAN commented 2 years ago

So, uh, I kinda resolved the issue of the nav images not popping up...and it's a weird fix?

Basically, instead of using "templates/basic/uploadednav.png" or any other shortened form to let the site know where to go, you have to actually write out the entire link: "https://mywebsite.com/templates/basic/uploadednav.png."

Again, a very weird fix since you don't need to write the whole url when linking images. But it's the only thing that's worked for me after picking this up again today.

I still need help with the color styling issues and the sidebar, sadly, but 1 out of 3 down!

therealNAAN commented 2 years ago

Latest update: I've decided to let the color styling alone for now (I've no idea how to fix it) but the lasting other issue, the sidebar, has been resolved! Jan 10 EDIT: I took out the html because I finally figured out my own problem lol. See the new comment below this one, please! The CSS styling is still the same, however.

2022_sidebar

While I don't know if it will work for everyone who visits this repository, I'm leaving the bits of code that helped in the above image. The only problem is that the comic area now has a huge area before the page that....refuses to be eliminated via CSS, lol. I'll be making that problem into a separate thread here much later after I sleep. The id names are the ones I used for my code, so feel free to use any others that work best for you.

Jan 10 EDIT: I took out the html because I finally figured out my own problem lol. See below please!

The specific CSS:

 #wrapper {
    background: transparent;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1600px;
    margin-top: -10px;
    z-index: 10;
  }
  [...]
    #header {
   text-align: center;
    width: 100%;
    padding: 10px;
   background: transparent;
  }

  #logo {
    width:100%;
    display: block;
    max-width: (whichever # you want)px or percent;
   position: fixed;
    margin: 0 auto;
}
[...]
#menuwrap {
  width: 100%;
  padding: 0px 3px 0px;
}

  #menu { 
    display: flex;
    max-width: 750px;
    margin: 0 auto;
    height: 55px;
    margin-top: -55px;
    text-align: center;
    background: transparent;
  font-family: (use your own font here);
   font-size: 25px;
  justify-content: center;
  text-shadow: 0px 5px 5px #000;
-webkit-text-stroke: 2px #000;
  }
[...]
/* sidebars and middle page */
 #middle {
  padding: 0 20px;
   max-width: 100%;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

#left-sidebar, #right-sidebar{
    width: 160px;
    padding: 0 20px;
    flex-grow: 0;
    flex-shrink: 0;
}

#left-sidebar {
    float: left;
    text-align: center;
    display: block;
}

#right-sidebar {
    float: right;
    text-align: center;
    display: block;
}
therealNAAN commented 2 years ago

image

I'm sorry for commenting on this again only two days later but I uh, resolved my own issue of the wide space before the comic area, and the sidebars! Turns out I had to place one sidebar before the main content (labeled main), and the other one after it (after the main tag). See the HTML as follows:

What goes in the header.php

<div id="middle">  
<div id="left-sidebar">
YOUR CONTENT HERE
</div>
    <main id="content">

What goes in the footer.php

 </main>
<div id="right-sidebar">
YOUR CONTENT HERE
</div> 

</div> --> the end div tag for the <div id="middle">
</div> --> the end div tag for <div id="wrapper">

Granted, there's some issues to take care of -- there's still too much spacing before the comic area, and the sidebars should be a little bit more to their respective sides, but those are easy to fix via CSS. So I'll leave that to everyone's tastes!

Hope this was useful! ^^)v