Support » Theme: Maskitto Light » Aligning footer text to left side?

  • Is there any possibility to align the text of the footer to left-hand-side, including some padding of let’s say 15px?

    I have tried to use <div align=”left”>, but it does not manage to bringe the footer further to the left than the last 25% of screen width.

    btw: I REALLY appreciate your wonderful & flexible theme.

    Thank you very much!

Viewing 15 replies - 1 through 15 (of 15 total)
  • It is left-aligned by default, is it not? However, I suppose you mean wanting to adjust it further. If so:

    1. Go to Maskitto Light Options.
    2. Navigate to the very bottom of the page until you see a black box.
      Paste the following code (just append, do not replace what is already in there):

      .thank-you-for-your-support {
        position: absolute;
        left: 15px;
      }
    3. Click Save Changes.

    Did that do the trick? If it is not to your liking, just change the value of left. Personally, to achieve around 15px I would use left: 1% instead.

    Hello traxt,

    thank you for your help.
    Your trick works, but as soon as the footer text is left-aligned a small horizontal area of about 5px height appears “below” the footer.
    Unfortunately, it isn’t really below the footer but covering the ower 5 px.
    I’ve changed footer height, so now the footer text is partly covered.

    Is that some padding effect or similar?!?

    Looking forward to your wisdom 🙂

    Can I get an image of that? The site link would be better if you can provide it.

    may I send it to you via email?

    Thank you

    OK, here we go: https://pl.vc/5qz1c

    Thank you for your help!

    Could you give me the CSS you used to reduce the footer? I’ll recreate what you did on my end so I may come up with a solution.

    Oops! Guess, I have changed it somehwere in the main styles.css file.
    Unfortunately, I have not documented this change … :-/

    Anyway, I would like to make it reverse now and change footer height via the Maskitto Light Options CSS code box instead(!).

    Maybe anyone could double-check if there have been changes made to the following part of the css?:

    /* Footer */
    
    footer.bottom {
    	background: #565656;
    	padding: 10px 0;
    	text-align: center;
    }
    
    footer.bottom img {
    	margin-bottom: 10px;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        filter: gray;
        -webkit-filter: grayscale(100%);
        opacity: 0.35;
    }
    
    footer.bottom .copyrights {
    	color:#9f9f9f;
    }
    
    footer.bottom .copyrights a {
    	color: #fff;
    }
    
    footer.bottom .footer-logo {
    	display: block;
    	padding-bottom: 10px;
    }
    
    footer.bottom .footer-logo img {
    	max-height: 30px;
    }

    Thank you SO much, Maskitto fans! 🙂

    Oh, oh … think I changed something in the bootstrap.min.css …
    Have not documented it. :-/

    This appears to be the only difference:

    footer.bottom {
    	background: #565656;
    	padding: 30px 0;
    	text-align: center;
    }

    Tell you what, how do you want the footer to look like? I can try to do that on my end instead and give you the CSS for it if successful.

    Hello traxt,

    I would love to change the height of the footer to the text height +1px, hence the padding should be 1px.

    The text should align left with 15px space to the left-hand screen border – which is just the way you css-coded above.

    In the above picture it’s looking like the text is cut below, while in fact it is not.
    The darker grey background of the footer text is just not reaching far enough down as soon as I set the text’s position to “absolute”.
    When I highlight the text I can see that the “Imprint” text just hasn’t
    enough contrast in relation to the lighter background of the below stripe … (You’ll see what I mean, if you’ll have a look at above screenshot). 🙂

    Thank you so, so much for your help!

    Like this?

    That’s just what I want it to look like :-)))

    The below was applied to the base, unmodified theme. You should restore the original CSS files you altered otherwise I cannot guarantee the result you seek.

    footer.bottom {
       padding: 0px 0 0px 0!important;
    }
    
    .thank-you-for-your-support {
      visibility: hidden;
    }
    
    .thank-you-for-your-support:after {
      visibility: visible;
      position: absolute;
      text-align: left;
      left: 1%;
      content: "Your Text Here";
    }

    Set your desired text as the value for content instead of using Footer Text. My method is not as elegant as it could be CSS-wise, but it’s the easiest solution to apply in my opinion as you won’t deal with modifying footer.php.

    That aside, you will notice that the original footer text no longer appears and is completely replaced. From what I’ve read in the forums, Shufflehound (the theme’s author) requests for credit in some form. You may want to keep that in mind when you apply this.

    Yes, I will give them credit on my “Imprint”-page, of course! 🙂
    The Link to the imprint should replace the shufflehound’s author info though.

    Is there a chance to add an URL to the CSS-Text …?
    I know only of an HTML-solution.

    And … unfortunately the footer height is not changing in my case.
    I’ve overwritten the modified footer.php file with the original one.
    No change. :-/

    Please use Simple CSS. Empty whatever you have in Maskitto Light Options > General > CSS Code. Copy the CSS I provided into Appearance > Simple CSS.

    Let me know if it works!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Aligning footer text to left side?’ is closed to new replies.