Help with Streamlined+Custom Page

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Help with Streamlined+Custom Page

Postby Kawaiiski » February 25th, 2018, 7:29 pm

I would normally never create a forum like this; I don't like bothering people. But if anyone is familiar with the awesome and simplistic template Streamlined, then this will probably be easier to understand. I can have a tendency to not be able to explain things well because of my anxiety, so sorry if this gets confusing...

I am creating a Character page for my Webcomic, Q-nnections, using the "Custom Pages" tab in Webcomic Management. Using a code I randomly found on this forum, and modifying HTML codes involved in the "news" and "archive" section, which I believe is located in Appearance -> Overall Layout, AND using Firebug extensively, I have manage to achieve the following HTML codes;

Code: Select all
        /* --------------- CUSTOM PAGE, CHARACTERS ------------------ */

.castmajor {
    background-color: rgba(33, 171, 205, 0);
    border: 6px solid rgba(33, 171, 205, 0.8);
    margin: 0.4%;
    padding: 13px 10px;
    position: relative;
    transition: all 2s ease 0s;
}

    .castmajor:hover {
      background: rgba(33,171,205, 0.2);
      border: 6px solid rgba(33,171,205, 0.2);
      border-radius: 50px 0px 50px 0px;
      -webkit-transition: all 2s;
      transition: all 2s;
     }

        .castminor {
          width: 15.5%;
          min-width: 500px;
          padding: 2%;
          margin: 0.9%;
          background-color: rgba(33,171,205, 0.2);
          border: 4px solid rgba(33,171,205, 0.8);
          color: #c5ecf6;
          -webkit-transition: all 2s;
          transition: all 2s;
        }

        .castminor:hover {
          background-color: rgba(33,171,205, 0.2);
          border: 4px solid rgba(33,171,205, 0.2);
          border-radius: 50px 0px 50px 0px;
          -moz-border-radius: 50px 0px 50px 0px;
          -webkit-border-radius: 50px 0px 50px 0px;
          color: #FFF;
          -webkit-transition: all 2s;
          transition: all 2s;
        }


        .castminor .display { display: none; }
        .castminor .displayAlt { display: none; }

        .castminor img { border: 0px solid rgba(255, 255, 255, 0.0); margin: 0 auto; }

        .castminor:hover img {
          border: 0px solid #99efc1;
        }

        .castminor h2,
        .displayAlt h2 { padding: 0px; margin: 0px; }

        .castminor p { margin: 0px; }

THIS is the code I put into Overall Layout...

Code: Select all
<b><center>This page is <i>a work in progress!</i> Please wait a while...</center></b>

    <div class="container">

      <h1><i class="fa fa-user"></i> Character Profiles</h1>

<div class="castmajor" style="clear: both;"><table><tbody><td class="portrait">
<img src="https://q-nnectionsfancomic.tumblr.com/image/171286868406" alt=""></td><td class="cast_text">
<h2>Name "Nickname" | Title | Age: -/Height: -</h2><br>
Bio (This is a Test)<br>
</td></tr></tbody></table></div>

<div class="castminor" style="clear: both;"><table><tbody><tr><td class="portrait">
<img src="http://imageshack.com/a/img923/7264/zvIn9p.png" alt=""></td><td class="cast_text">
<b>Name "Nickname" | Title | Age: -/Height: -</b><br>
Bio (This is a Test)<br>
</td></tr></tbody></table></div>

And THIS is the code I have for Custom Pages (so far).

Okay... so, my problem is, I want the "castmajor" images to be full-sized, and the "castminor" images, I believe, are working just fine. (I want the "castminor" floating blue boxes to appear next to each other, as they do on the Archive page, if that's possible.) However, my main issue is, I THINK, td class="portait". This class is good for 200x200 images consistently, but not much else; and I intend to use 600x900 images for "castmajor". How do I change this? Sorry again if I'm not making any sense.
An artist since nine years old, and I still don't know what the heck I'm doing ┐(‘~`;)┌
User avatar
Kawaiiski
 
Posts: 18
Joined: June 10th, 2016, 1:08 pm

Re: Help with Streamlined+Custom Page

Postby eishiya » February 25th, 2018, 9:41 pm

I'm having some trouble figuring out what you want. Are you trying to set a specific width on the castmajor and castminor images?

To make the castminor boxes float next to each other, replace the "clear: both" on them with "float: left" and set the min-width on .castminor to something small enough that two can fit side by side within the width of the container (450px works).

(By the way, your one castmajor image is broken because you're using the URL of a webpage with the image rather than the URL of the image itself. Also, the image looks like it's been squished, did you scale it wrong?)
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: Help with Streamlined+Custom Page

Postby Kawaiiski » February 25th, 2018, 9:58 pm

eishiya wrote:I'm having some trouble figuring out what you want. Are you trying to set a specific width on the castmajor and castminor images?

To make the castminor boxes float next to each other, replace the "clear: both" on them with "float: left" and set the min-width on .castminor to something small enough that two can fit side by side within the width of the container (450px works).

(By the way, your one castmajor image is broken because you're using the URL of a webpage with the image rather than the URL of the image itself. Also, the image looks like it's been squished, did you scale it wrong?)

Sorry, no; I am not trying that. If the image in question can fit into the boxes properly, then I don't need a specified width. Also, I know how to change the boxes properties with Firebug.

Ahhh, okay. You're right; I grabbed the wrong URL somehow. It appears to be working, now. I also replaced "clear: both" with "float: left", but they still are not stacking next to each other in the way that I want. They are stacking vertically, but not horizontally. I want the boxes for .castminor to stack both vertically and horizontally, if that makes sense;

Code: Select all
<b><center>This page is <i>a work in progress!</i> Please wait a while...</center></b>

    <div class="container">

      <h1><i class="fa fa-user"></i> Character Profiles</h1>

<div class="castmajor" style="clear: both;"><table><tbody><td class="portrait">
<img src="https://68.media.tumblr.com/54cbfe277988915c7cccbc30d4b6f4ba/tumblr_p4qa9ypgWk1wahyyto1_1280.png" alt=""></td><td class="cast_text">
<h2>Name "Nickname" | Title | Age: -/Height: -</h2><br>
Bio (This is a Test)<br>
</td></tr></tbody></table></div>

<div class="castminor" style="float: left;"><table><tbody><tr><td class="portrait">
<img src="http://imageshack.com/a/img923/7264/zvIn9p.png" alt=""></td><td class="cast_text">
<b>Name "Nickname" | Title | Age: -/Height: -</b><br>
Bio (This is a Test)<br>
</td></tr></tbody></table></div>

<div class="castminor" style="float: left;"><table><tbody><tr><td class="portrait">
<img src="http://imageshack.com/a/img923/7264/zvIn9p.png" alt=""></td><td class="cast_text">
<b>Name "Nickname" | Title | Age: -/Height: -</b><br>
Bio (This is a Test)<br>
</td></tr></tbody></table></div>

This is the current code for the Custom Page section.
Last edited by Kawaiiski on February 25th, 2018, 10:05 pm, edited 1 time in total.
An artist since nine years old, and I still don't know what the heck I'm doing ┐(‘~`;)┌
User avatar
Kawaiiski
 
Posts: 18
Joined: June 10th, 2016, 1:08 pm

Re: Help with Streamlined+Custom Page

Postby eishiya » February 25th, 2018, 10:03 pm

As I mentioned, you need to reduce the widths. If the two containers don't fit side by side, they won't be placed side by side.
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: Help with Streamlined+Custom Page

Postby Kawaiiski » February 25th, 2018, 10:11 pm

eishiya wrote:As I mentioned, you need to reduce the widths. If the two containers don't fit side by side, they won't be placed side by side.

Ah! Okay. You're right; it wasn't quite going through my head what you were saying at first, sorry. I'm no good at HTML without Firebug (or mostly at all, really). Anyway, thanks a lot~! I seriously appreciate it. If there's any other issues I'll let you know, but there doesn't seem to be. Sorry for taking you away from your busy schedule or whatever else!
An artist since nine years old, and I still don't know what the heck I'm doing ┐(‘~`;)┌
User avatar
Kawaiiski
 
Posts: 18
Joined: June 10th, 2016, 1:08 pm

Re: Help with Streamlined+Custom Page

Postby Kawaiiski » February 25th, 2018, 11:04 pm

Okay, so this is annoying. The .castmajor image suddenly shrunk. I wouldn't mind that if it was intentional, but it's not. I must have misplaced something in the code;

Code: Select all
        /* --------------- CUSTOM PAGE, CHARACTERS ------------------ */

       .containerchara {
          max-width: 1500px;
          position: relative;
          margin: 0 auto;
          padding: 0% 3%;
         }

        .containerchara h1 { border-bottom: 3px solid #2180cd; }

.castmajor {
    background-color: rgba(33, 171, 205, 0.2);
    border: 4px solid rgba(33, 171, 205, 0.8);
    margin: 0.4%;
    padding: 0px;
    position: relative;
    transition: all 2s ease 0s;
}

    .castmajor:hover {
      background: rgba(33,171,205, 0.2);
      border: 4px solid rgba(33,171,205, 0.2);
      border-radius: 50px 0px 50px 0px;
      -webkit-transition: all 2s;
      transition: all 2s;
     }

        .castminor {
          width: 15.5%;
          min-width: 450px;
          padding: 15px;
          margin: 0.6%;
          background-color: rgba(33,171,205, 0.2);
          border: 4px solid rgba(33,171,205, 0.8);
          color: #c5ecf6;
          -webkit-transition: all 2s;
          transition: all 2s;
        }

        .castminor:hover {
          background-color: rgba(33,171,205, 0.2);
          border: 4px solid rgba(33,171,205, 0.2);
          border-radius: 50px 0px 50px 0px;
          -moz-border-radius: 50px 0px 50px 0px;
          -webkit-border-radius: 50px 0px 50px 0px;
          color: #FFF;
          -webkit-transition: all 2s;
          transition: all 2s;
        }


        .castminor .display { display: none; }
        .castminor .displayAlt { display: none; }

        .castminor img { border: 0px solid rgba(255, 255, 255, 0.0); margin: 0 auto; }

        .castminor:hover img {
          border: 0px solid #99efc1;
        }

        .castminor h2,
        .displayAlt h2 { padding: 0px; margin: 0px; }

        .castminor p { margin: 0px; }

Overall Layout code...

Code: Select all
<b><center>This page is <i>a work in progress!</i> Please wait a while...</center></b>

    <div class="containerchara">

      <h1><i class="fa fa-user"></i> Character Profiles</h1>

<div class="castmajor" style="clear: both;"><table><tbody><td class="portrait">
<img src="https://68.media.tumblr.com/54cbfe277988915c7cccbc30d4b6f4ba/tumblr_p4qa9ypgWk1wahyyto1_1280.png" alt=""></td><td class="cast_text">
<h2>Q “[REDACTED]” | Ambassador of Humanity, Exiled | Age: 56(?)/Height: 6’3”</h2><br>
<center>Part of the ever mysterious Q Continuum, or at least used to be. When his son started making trouble, they were both dumped on Voyager (buck naked no less) and forced to join everyone else in the journey back home. Of course though, after coming to Earth, Q wouldn’t disgrace himself by staying on the “ball of boredom”. So [REDACTED], now curious of what this self-proclaimed “Ambassador of Humanity” is really made of, decides to take him up on [REDACTED], eventually [REDACTED].</center><br>
</td></tr></tbody></table></div>

<div class="castminor" style="float: left;"><table><tbody><tr><td class="portrait">
<img src="http://imageshack.com/a/img923/7264/zvIn9p.png" alt=""></td><td class="cast_text">
<b>Name "Nickname" | Title | Age: -/Height: -</b><br>
Bio (This is a Test)<br>
</td></tr></tbody></table></div>

<div class="castminor" style="float: left;"><table><tbody><tr><td class="portrait">
<img src="http://imageshack.com/a/img923/7264/zvIn9p.png" alt=""></td><td class="cast_text">
<b>Name "Nickname" | Title | Age: -/Height: -</b><br>
Bio (This is a Test)<br>
</td></tr></tbody></table></div>

Code on the Custom Page.

(Keep in mind I had to create a new .container for this page called .containerchara.) Either way, the image isn't appearing in FULL resolution anymore (the image itself is currently 600 x 900, but it LOOKS half that size). Help?

[EDIT] Definitely has something to do with the text itself, maybe its the formatting and how it's "unset". when I clear it with Firebug, the image is not shrunk down, anymore. I probably need a few extra bits of code so that doesn't happen, but I'm not sure what it could be.
An artist since nine years old, and I still don't know what the heck I'm doing ┐(‘~`;)┌
User avatar
Kawaiiski
 
Posts: 18
Joined: June 10th, 2016, 1:08 pm

Re: Help with Streamlined+Custom Page

Postby eishiya » February 25th, 2018, 11:30 pm

The image is being resized by this CSS:
Code: Select all
img {
...
max-width: 100%;
...
}


You could override this just for .portrait img so that other images aren't touched:
Code: Select all
.portrait img {
max-width: auto;
}


If you want the castminor images to keep shrinking and only have castmajor images at full size, then instead of .portrait img, use .castmajor .portrait img
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: Help with Streamlined+Custom Page

Postby Kawaiiski » February 25th, 2018, 11:50 pm

eishiya wrote:The image is being resized by this CSS:
Code: Select all
img {
...
max-width: 100%;
...
}


You could override this just for .portrait img so that other images aren't touched:
Code: Select all
.portrait img {
max-width: auto;
}


If you want the castminor images to keep shrinking and only have castmajor images at full size, then instead of .portrait img, use .castmajor .portrait img


I don't want ANY of the images to shrink down; I didn't even think about that. How do I override? I've tried this;

Code: Select all
        /* --------------- CUSTOM PAGE, CHARACTERS ------------------ */

.portrait img {
max-width: auto;
}

.castmajor {
    background-color: rgba(33, 171, 205, 0.2);
    border: 4px solid rgba(33, 171, 205, 0.8);
    margin: 0.4%;
    padding: 0px;
    position: relative;
    text-align: center;
    transition: all 2s ease 0s;
}

    .castmajor:hover {
      background: rgba(33,171,205, 0.2);
      border: 4px solid rgba(33,171,205, 0.2);
      border-radius: 50px 0px 50px 0px;
      -webkit-transition: all 2s;
      transition: all 2s;
     }

        .castminor {
          width: 15.5%;
          min-width: 450px;
          padding: 15px;
          margin: 0.6%;
          background-color: rgba(33,171,205, 0.2);
          border: 4px solid rgba(33,171,205, 0.8);
          color: #c5ecf6;
          -webkit-transition: all 2s;
          transition: all 2s;
        }

        .castminor:hover {
          background-color: rgba(33,171,205, 0.2);
          border: 4px solid rgba(33,171,205, 0.2);
          border-radius: 50px 0px 50px 0px;
          -moz-border-radius: 50px 0px 50px 0px;
          -webkit-border-radius: 50px 0px 50px 0px;
          color: #FFF;
          -webkit-transition: all 2s;
          transition: all 2s;
        }


        .castminor .display { display: none; }
        .castminor .displayAlt { display: none; }

        .castminor img { border: 0px solid rgba(255, 255, 255, 0.0); margin: 0 auto; }

        .castminor:hover img {
          border: 0px solid #99efc1;
        }

        .castminor h2,
        .displayAlt h2 { padding: 0px; margin: 0px; }

        .castminor p { margin: 0px; }

       .containerchara {
          max-width: 1500px;
          position: relative;
          margin: 0 auto;
          padding: 0% 3%;
         }

        .containerchara h1 { border-bottom: 3px solid #2180cd; }

But it didn't work. Do I need a new div class? Or do I need to change something else that I'm missing? It's probably obvious and I'm being a moron.
An artist since nine years old, and I still don't know what the heck I'm doing ┐(‘~`;)┌
User avatar
Kawaiiski
 
Posts: 18
Joined: June 10th, 2016, 1:08 pm

Re: Help with Streamlined+Custom Page

Postby eishiya » February 25th, 2018, 11:57 pm

Just get rid of the max-width: 100%; rule in your CSS.

Apparently "auto" isn't a valid property for max-width oops :'D Use initial instead.
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: Help with Streamlined+Custom Page

Postby Kawaiiski » February 26th, 2018, 12:03 am

eishiya wrote:Just get rid of the max-width: 100%; rule in your CSS.

Apparently "auto" isn't a valid property for max-width oops :'D Use initial instead.

Oooooh. Ha ha, whoops; I don't blame you. Everyone makes mistakes :) thanks again~!
An artist since nine years old, and I still don't know what the heck I'm doing ┐(‘~`;)┌
User avatar
Kawaiiski
 
Posts: 18
Joined: June 10th, 2016, 1:08 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 4 guests