Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by jgennick

  1. @emmanomadwine: And it looks like the following will do it for your other page: #collection-578ef7779f74566d5f3dd580 #content .sqs-block-button-element--medium {width: 150px;) I've been meaning to write a blog post on button sizing. I'll try and push that higher on my priority list. Try not to go too much wider with button widths. The 150 pixels seems to fit ok on an iPhone, so I think we're good as far as mobile viewing goes. If you start making reeeeeealy wide buttons though, then the CSS gets more complicated to accommodate narrow displays.
  2. @emmanomadwine For your first page that you list, it looks like you can add the following rule to your Custom CSS Editor: #collection-57728c2de6f2e13395d4be5b #content .sqs-system-button {width: 150px;} The collection-5772... portion is the collection identifier for that specific page of your site. You can View->Source from your browser and look in your page's body tag to find where I got it from. The reference to "content" part refers to the main content of your page. It is a template-specific value. Then sqs-system-button to target the buttons within your main content.
  3. Slammed with travel and work deadlines this week and the next. I will try and make time to look at those buttons for you, but I can't promise anything at this point.
  4. Where is the domain registered? Most registrars that I'm familiar with offer an option to forward a domain name to a specific URL. So visitors will type in something like www.oldurl.com, and you can have that url forward to www.newurl.com/somepage. Visitors will see that they have been forwarded to your new site, but that's probably ok. You want them to know the new URL anyway.
  5. It is because text-align:center needs a block element like a div. Try the following: <div style="text-align:center"><span style="color:red; font-family:Georgia; font-size:2em;">The goal of the Women’s Enterprise Action Loan Fund, (WEALF): helping women business owners become financially self-sufficient.</span></div> This is working for me, and you can see it for a while at gennick.com/test.
  6. Emma, it looks like the following rule will do the job for your home page: #collection-57728b53e4fcb512c0673cf9 #page .sqs-block-button-element { width: 132px; } And the following for your collaborate page: #collection-57728c2de6f2e13395d4be5b #page .sqs-system-button { width: 134px; } The #collection-xxx part of each rule identifies the specific page. View a page, view the source, type ctrl-f and search on "body", and you should see the page's ID value. You can then target the #page element so as to exclude buttons in the footer area. Then the last part of each rule targets all the buttons on each respective page.
  7. @KBishop, it looks like you found what you need to put a color background on the page title. I see the blue background on your home page. For the description, you might try: #page-description p {background-color: #ff00ff;} Give that a go and see whether you like the result.
  8. I stuck it into the Custom CSS editor in my case, because I want the rules to affect all my pages.
  9. I use rules like the following for that purpose: #page-title {width: 290px; background-color: #d92414; padding-left: 10px; padding-right: 10px; margin-right: 0 !important;} #page-description p {background-color: #025928; padding-left: 5px; padding-right: 5px;} In my case I'm just after some background to make the text more readable.
  10. Yes. I took a look at your home page. Try adding the following CSS rule to your Custom CSS Editor: #collection-55b2be7ce4b0d43c4cf5074e .sqs-slice-buttons li {width: 8em;} The #collection identifier limits the rule to your home page. The rest of the rule hones in on those two buttons.
  11. Jeff, this is good information. Thank you. I'll update my blog post. Can you provide further details about Facebook's decision and why they took it? Any chance you could contact me offline?
  12. The Fulton template is better as a separate question, and it would help if you posted a link to the specific page you want to colorize. For regular pages though, the following seems to work: #siteWrapper {background-color: green;} And then you can target the footers with: #preFooter {background-color: green;} #footer {background-color: green;] Index pages may require a different technique. I had time for only a fast look while eating breakfast, and hope the above helps.
  13. Maybe something like: body {background-color: pink;} div#canvas {background-color: pink;} Put style tags around them and put them into the Page Header Code Injection field for the page you want to affect.
  14. Every template requires different CSS rules. Some problems are easier to solve in one template than in another. Please post a link to your site, and I will try and take a look.
  15. Try this. Go to your Custom CSS Editor and add the following rule: h1#page-title { display: inline; background-color: #ff00ff; padding-left: 10px; padding-right: 10px; } See if the above gives a purple background on the page you pointed me toward. It should do that. If you right-click on your page title and select Inspect Element, you will see a pane open at the bottom of your browser page. Look closely, and you will see that the page title is an h1 tag with an ID value of "page-title". That's how I got the h1#page-title part. Scroll up in that inspector pane. Find the body tag. It's a long one. Look toward the end of that tag. you'll find an id="collection-blahblahblah" value. That is the source of #collection-550b etc. You'll have to look up the specific collection value for each page, and write a rule like the above for each page. Test everything closely. This turned out to be a little bit tougher than I had expected. Screenshot below showing my results.
  16. It should be possible to do. Would you post one of your page URLs?
  17. Those footer items are supposed to move around. That's part of the responsive-design approach that allows your site to look good on phone and tablet as well as on a PC. I recommend center aligning your phone number. That way, the phone, your logo, and your email will stack up vertically and all be centered when the browser window is narrow like on a phone or a tablet. You might also create a 300 pixel-wide version of your logo, and upload that narrower image. Doing so will help avoid that very large logo that you get when the browser window gets just narrow enough for the elements to stack.
  18. ...you should also consider adding a rule like: @media screen and (min-width: 641px) and (max-width: 830px) { .sqs-block-button-element-element--small { width: 150px !important; } } I can't test this particular rule thoroughly right now, but I believe it will protect you from colliding buttons. Make your browser window wider and narrower, and you'll see what I'm getting at. I believe I have the correct syntax here.
  19. There's actually a lot to think about with your site. It looks though, like you consistently use small buttons for those top three. Thus, you can try adding the following rule to your Custom CSS Editor: .sqs-block-button-element--small {width: 210px !important;} Take note of the double-hyphen in front of "small.". This rule leaves the other buttons on your pages as they are. It's really only those top three that need to be the same. I agree with you on wanting them to be that way. The buttons are wide enough so as to collide when you narrow the browser window. So....
  20. I recently helped someone with this same issue on another template. Wish I could find that email that I had sent. I did look just now at the Pacific template's demo page. There's a button at the bottom, and I was able to set the width using the following rule: #OTButton a {width: 300px} Do you have a page already with buttons on it that you want to all be the same size? Point us to that page, and we can better help. The above rule might or might apply to your specific case.
  21. I'm sorry. I don't know how I missed seeing that. Target the page body instead: #page-body-wrapper {border-bottom: white solid 1px;} It looks like you've instead solved the problem by changing the link color to white. That might be a better approach. I like it better than to have the underlines. The rule I give here will cause some trouble if you ever place a Call to Action button in your page body. That's another reason to go with your current approach of making the links white.
  22. Mathias, I like very much the image that headlines your website. That's a nice photo. Are you familiar with adding CSS rules to the Custom CSS Editor? You get there by clicking the paintbrush icon, scrolling to the bottom of the Style Editor, and clicking the Custom CSS button. I can offer two ideas for underlining the links. One idea is to add a simple underline to the font: #canvas-wrapper a {text-decoration: underline;} I did not so much like the look of the result, so I also offer this alternative approach: #canvas-wrapper a {border-bottom: black solid 1px;} Add one of these rules to your Custom CSS Editor. You should see results. Then you can decide which result you prefer. If you like, you can change 1px to 2px (or any other number) and get a thicker line. The use of #canvas-wrapper in the rules above targets the html DIV element containing the main body content of your page. Links in the footer and the header will not be affected. Jonathan Gennick, Author: Learn CSS for Squarespace
  23. Well. Felipe, I don't know how I managed to look at what I was doing and yet not see. You're absolutely correct. Try this instead: .subnav {background-color: rgba(0,0,255,0.1) !important;} Then you might find the following page helpful for explaining how that rgba color syntax works: http://www.w3schools.com/cssref/csscolorslegal.asp Basically, the values are red, green, blue, and an opacity.
  • Create New...