WordPress.org

Ready to get started?Download WordPress

Forums

How can I make my Website look like this... (18 posts)

  1. Eande
    Member
    Posted 1 year ago #

    http://awesomescreenshot.com/0bewb1s4a

    Hello!!! any help could be greatly appreciated. I'm want to make my site look more professional and classy, this is the screen shot of how it can look... any other suggestion always welcome!
    Thanks a million,

    Angela
    http://evolveandexpress.com/home/

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Hi Eande,
    Does your theme give you a section in the dashboard where you can make CSS modifications without editing the theme's files?

  3. Eande
    Member
    Posted 1 year ago #

    I can edit CSS via the appearance, but I tend to place it in the 'backend' section of suffusion options where it overrides the updates..

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Okay, so you're alright with adding CSS to that backend section?
    Here's some CSS to get you started;

    #content h1.posttitle {
     text-align: left;
    }
    
    input[type="submit"] {
    	font-size: 14px;
    	color: #ffffff;
    	background: -moz-linear-gradient(
    		top,
    		#00bf00 0%,
    		#008500);
    	background: -webkit-gradient(
    		linear, left top, left bottom,
    		from(#00bf00),
    		to(#008500));
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    	border-radius: 6px;
    	border: 1px solid #000000;
    	-moz-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	-webkit-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	text-shadow:
    		0px 1px 0px rgba(000,000,000,0.7),
    		0px 1px 0px rgba(255,255,255,0.3);
    
    }

    Could you make quote bits actual blockquotes? There should be a button to do this.
    E.g quote:

    Dedicate yourself to continuous, personal improvement,
    for you are your most precious resource
    Brian Tracy

  5. Eande
    Member
    Posted 1 year ago #

    thank you.. and yes I have done this, but I'm not seeing a difference?!

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    You may need to clear your browser's cache to see instantaneous changes.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Also for aligning the title left, replace this part of the code;

    #content h1.posttitle {
     text-align: left;
    }

    with this;

    #content h1.posttitle {
     text-align: left !important;
    }
  8. Eande
    Member
    Posted 1 year ago #

    Thank you, I've cleared my cache but still I'm not seeing any changes... Am i looking to see a box around my quotes? My Header is now aligned to the left!

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Am i looking to see a box around my quotes?

    Not yet, it just allows you to apply styles to that particular (blockquote) element.

    Let's do that now;

    blockquote {
     margin: 0;
     margin-bottom: 20px;
     padding-top: 20px;
     background-size: 3%;
     background-position: 20px 10px;
     background-color: rgb(247,244,246);
     font-size: 18px;
     font-family: georgia, serif;
     font-style: italic;
     height: auto;
    }
    
    blockquote p {
     margin: 0;
    }
  10. Eande
    Member
    Posted 1 year ago #

    Thank you! That looks lovely!!

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    To make the text align with the navigation;

    article.page {
     padding-left: 0;
    }

    And to pad-out the navigation a bit;

    #wrapper #nav {
     padding: 5px;
    }
  12. Eande
    Member
    Posted 1 year ago #

    wicked thank you :) :) :)
    The nav bar looks so much better like this...
    How did you stretch our the boxes for the sign up form in the widget? The text you use is a lot nicer as well and the button looks great.
    Can I incorporate this button on my sign-up form plugin too?

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    How did you stretch our the boxes for the sign up form in the widget?

    #wysija-2 input[type="submit"] {
     width: 100%;
     /* also you may need this to make your button behave like a button */
     cursor: pointer;
    }

    Can I incorporate this button on my sign-up form plugin too?

    Sure, amend this;

    input[type="submit"] {
    	font-size: 14px;
    	color: #ffffff;
    	background: -moz-linear-gradient(
    		top,
    		#00bf00 0%,
    		#008500);
    	background: -webkit-gradient(
    		linear, left top, left bottom,
    		from(#00bf00),
    		to(#008500));
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    	border-radius: 6px;
    	border: 1px solid #000000;
    	-moz-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	-webkit-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	text-shadow:
    		0px 1px 0px rgba(000,000,000,0.7),
    		0px 1px 0px rgba(255,255,255,0.3);
    
    }

    To this;

    .mabstyle-default.magic-action-box form input[type="submit"],
    input[type="submit"] {
    	font-size: 14px;
    	color: #ffffff;
    	background: -moz-linear-gradient(
    		top,
    		#00bf00 0%,
    		#008500);
    	background: -webkit-gradient(
    		linear, left top, left bottom,
    		from(#00bf00),
    		to(#008500));
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    	border-radius: 6px;
    	border: 1px solid #000000;
    	-moz-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	-webkit-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	text-shadow:
    		0px 1px 0px rgba(000,000,000,0.7),
    		0px 1px 0px rgba(255,255,255,0.3);
    
    }
  14. Eande
    Member
    Posted 1 year ago #

    Thanks andrew,
    I'm having problems implementing this code, I've put it in the custom styles for magic box, also tried in the backend - emptied caches and nothings showing at the moment.
    Am I missing something?
    Also in the sign-up widget on the right side-bar, you stretched out my input boxes for name and email,,, can I do this too?

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    I can't see the code coming through into the webpage, as in all other code like the blockquote style is coming through. Just not the code in my last post.

    Do you have any ideas why?

  16. Eande
    Member
    Posted 1 year ago #

    No I really don't know why.. I'm trying to figure it out... Where should I put this code normally??

  17. Eande
    Member
    Posted 1 year ago #

    It took a while, but I figured it out, it was only a drop-down box that allowed me to choose which design I had already created, (I'd opted for default and added my own stuff there) but now it works perfectly - Thanks!!!!

  18. Eande
    Member
    Posted 1 year ago #

    Can anyone help stretch out my input boxes on my plugin as showed in the link above? I mean the the sign up box in the sidebar... I love how they align in the screenshot...
    Thank you!! :)

Topic Closed

This topic has been closed to new replies.

About this Topic