I am creating a new website via Squarespace platform. The template is Brine Family 7.0.
https://kazoo-bulldog-snp5.squarespace.com/
Password to access is: 1234
I am trying to change to some text display that I am not able to do with the out of the box feature of Squarespace, but I can access some code sections to do some custom.
On the cover/landing page, I have some text displayed on the top of the page, above the logo that is centered. I want to display it on the bottom of the page, just like that:
https://ibb.co/fN1V5th
Do you have any code suggestion for that?
Thanks a lot for your kind help!
Use this code with your content. (Assuming content is placed in h1 tag)
h1{
position: relative;
bottom: 20%;
}
And, this community is not for suggestions. If you find problems or errors in your project code, you can ask in this community. Hope it helps!!.. Happy Coding!!
Related
I want to ask a few questions regarding advanced HTML formatting of my homepage in this case.
Some background to my problem:
I am using a content management system called "Joomla!" to manage my site.
Here is a link to my site under construction... Smart-Drones.
At this point I have designed exactly how I want the website to look by basically "drawing it" using paint.net. I have all of the graphics on different layers so that I can save them and insert them into the web page as PNGs.
Basically this is how I want my website landing page to look:
(since I can post pictures with my "reputation of <10" please refere here: http://forum.joomla.org/viewtopic.php?f=706&t=858845)
The way the Joomla! Content Management System works is by splitting the website into modules which are in specific positions.
Inside each "position" is a space that can be formatted using HTML and my home page is one big HTML module so it's basically a bog standard HTML page.
You can see from the images attached that the landing page requires a large background image (which provides framing for the page). The background image is a PNG and has the Fibonacci patterns as well as a large picture in the center of the page.
I want to overlay more elements, such as images, buttons and text over that background image. I also want to be able to precisely position the HTML elements.
The image below should give an idea of how I need to position the elements:
I have been trying to formulate the page using a WYSIWYG editor called JCE (Joomla Content Editor) but have been having no luck. It just refuses to work and is so fickle to work with!
I tried to insert a div and then add the background image and to position the elements over that image using 'absolute positioning' but the farthest that I have managed to get is what you can see on the home page, a mess:
The WYSIWYG editor has generated this code:
<div style="background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px; position: relative;"> <img style="position: absolute;" src="images/logo/Smart-Drone-4-logo.png" alt="Smart-Drone-4-logo" /><span class="h3" style="position: absolute;"><span class="h4" style="color: #ffffff; position: absolute;">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span><span style="color: #ffab00;"><span class="h4"></span> </span> </span>
</div>
Not pretty, so I ask the community...
...How do you normally go about this process? It should be fairly standard procedure but my searches have turned up no practical advice.
Any advice or links to tutorials that may be of help will be greatly appreciated.
Best regards,
Jethro.
http://forum.joomla.org/viewtopic.php?f=706&t=858845
Emmanuel is basically right about the site layout edit abilities of tinyMCE. But Joomla's tinyMCE integrates buttons for formatting. That means you can add your own formats via a file called "editor.css" which is placed in your template /css folder. All defined classes in there are integrated into tinyMCE. So if you want to set background images via tinyMCE your best bet is to create or edit the editor.css and add something like the following.
editor.css example:
.my-background {
background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png');
background-repeat: no-repeat;
background-position: center center;
width: 799px;
height: 906px;
position: relative;
}
I have a program that creates a report in HTML. That HTML file is displayed in a TWebBrowser component (Delphi) and basically prints the page using this code:
WebBrowserComponent.ControlInterface.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER, vIn, vOut) ;
The report needs to match a pre-printed form. In order to place values exactly at the right place, I use CSS code like this:
#date_of_invoice {
position: absolute;
left: 3mm;
top: 90mm;
width: 29mm;
height: 5mm;
text-align: center;
font-weight: bold;
}
This was a working solution. Any new client that wished to use this program could hire a web designer and customize the HTML template for their needs. Today I got a new request, saying that there should be more than one pages printed at once. I can force new pages by adding:
<div style="page-break-after: always;">
content on page...
</div>
However, when absolute positions are used then page-break-after has no effect on the absolutely positioned elements. So here is the question: is it possible somehow to position elements relative to the top left corner of the current page? I know that HTML does not have a "current page" concept. But since we have "page-break-after" CSS property, I was hoping there might be something similar for positioning elements relative to the current page. Maybe there is a trick to place a small invisible element in the top left corner and position other elements relative to that invisible point of reference?
The other option would be to reimplement all reports from scratch and use PDF instead of HTML. Which would be a very bad idea because there are already several reports made with HTML, and I don't want to redesign them by hand, and then I don't want to tell my customers that they won't be able to customize the reports in the future.
I am using Google Blogger. I just changed template of my blog and choose a new one. But there is a problem with this one. My logo is not fully showing.
My website: www.pkgeek.com
The K of the logo is missing. I tried to find the code for the logo, but didn't find. I think the author haven't typed specific code for the logo.
I think the blogger it self is doing some customization.
How can i fix this ?
Your div is way too small for you Logo :).
Just go in your css file and paste this code.
'#header { width: 30%; }'
I put 30% in case you need to add some things on the right of your logo, if not, just put 100% it goes well.
Good luck ;)
#header needs to be set to width: 267px instead of 220px in your css
I'm not a hardcore developer, so please go easy on me :)
I'm building a new website for myself (I'm a designer) and I've tried adding facebook "Follow" and "Like" buttons to my HTML (I'm not using a CMS of any kind), by following the instructions here: https://developers.facebook.com/docs/plugins/follow-button
I've created an app ID already.
I generate the code (using my own Profile URL), I put the top chunk of generated code immediately after the opening <body> tag, and then the bottom chunk of code of generated code somewhere on the page. I even put "test text here" in the div.
When I save and refresh my web page, all it does is add "test text here", but no follow or like buttons in sight!
I've even tried the code from this page which is slightly different, and have put in my own app ID in the relevant place: https://developers.facebook.com/docs/javascript/quickstart
Does anyone know what I'm doing wrong? I saw a similar question here which was closed because it was apparently not a real question! https://stackoverflow.com/questions/15261443/facebook-follow-button-html5-dreamweaver
http://www.practicalecommerce.com/articles/3214-Add-the-Twitter-Tweet-and-Follow-Buttons-without-Hiring-a-Developer
Try if this helps you. I don't know what your code looks like but, this should help you a little.
Trying this code to your webpage and make sure you put the right url to your page directly:
<a href="http://www.facebook.com" >
<img src="_images/footer_buttons/facebook.png" />
Try downloading a small Facebook button image and add some CSS for the button so that its positioned and sized the way you want it.
CSS example:
#bottom_icons img{
border: 1px solid rgb(128, 128, 128);
border-radius: 3px;
float:right;
margin-right:5px;
margin-left:2px;
margin-top:5px;
}
I have a website that was developed using iWeb where you can drag any object anywhere and make really nice websites. However it does not easily work well with websites that need a database. Because of this I am rewriting a website using Ruby on Rails 3.2.3, CSS3, Bootstrap 2.0, etc.
Here is the link to the website I am rewriting. http://www.iktusnetlive.com/Home.html
I am trying to replicate the portion where the blue camera with LIVE in yellow is in the header. I want to line up text to where the camera lens is. The graphic is 60X55. I have tried for a few hours playing with line-height, padding-top and other CSS options but I could not get the text to move down.
Here is my HTML code that includes the graphic and text I want to line up with the camera lens:
<p class="align-center"><span id="camera-text"><span id="text-bold"><%= image_tag("live_transparent.png", alt: "iktusNETlive") %> To view FREE LIVE STREAMING VIDEO, you will need to create a FREE ACCOUNT and be logged in.</span></span></p>
Here is my CSS code:
#camera-text {font-size: 15px; vertical-align: middle; color: #red;}
.align-center { text-align: center; }
#text-bold { font-weight: bold; }
I wonder if this is something that I will be able to do. As you can see I have a gradient as my page background. I do not know if this is possible using Bootstrap, CSS3 or HTML5. I would have created a table back in the day and use cell padding and other options that are no longer available in HTML5 apparently.
Any help would be appreciated.
You can generally center block level items in CSS like this:
.some-class {
display: block; /* needed if you'd like to center an inline element */
margin: 0 auto;
}
Setting the right and left margins to auto does the trick.
Try absolute positioning When you need to get really specific:
If you're building a basic website, Ruby on Rails and Twitter Bootstrap are overkill and will only complicate things. You might try WordPress as you get the hang of it.