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;
}
Related
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
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!!
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 view in Drupal 7 that displays 4 user field of the currently logged-in user. I rewrote the output to the following code:
<div>[field-1]</div>
<div>[field-2]</div>
<div>[field-3]</div>
<div>[field-4]</div>
I can add some CSS classes to the fields to let everything look a little bit better, but I'm stuck at a certain point: I'd like to add a link to the block that redirects the user to his/her profile page (the url is user/[uid]). To be completely clear, I'd like the whole block to function as some kind of "button" (just like the "button" in the top menu of this website), so I don't want the seperate fields to be linked to the profile page (I know how to do that anyway).
Can this be achieved with CSS and/or HTML?
Try wrapping the 'div' in an 'a' element:
<div>[field...]</div>
Edit: This will make all the text appear as a link, so might want to add some CSS. Example:
HTML:
<a class="link-box" href="/user/id"><div>[field...]</div></a>
CSS:
.link-box {
color: #000;
text-decoration: none;
}
I have the following problem:
My landing page is composed of 2 images: a background image (top-banner) assigned to the body element and another image where I am presenting my content.
My problem is that both images are quite large and always, I have to wait for the main image to show up first, and than the background image.
This is very annoying for my and it does not look nice.
I have created an online version with sample images that clearly show my problem. Please check it: here
I have tried many different JavaScript techniques and online solutions, but none of them solved my problem.
All I want is the background image to show first, and than the main image.
Here is the html code:
<body background='top-banner2.jpg' style='background-position: top center; background-repeat:no-repeat;'>
<a href="#">
<img border='0' style='position:absolute; width:965px; left:50%; margin-left:-487px; top:440px;' src='main2.jpg' />
</a>
</body>
I am open to any solution, JavaScript, AJAX, whatever, just to see it working!
Thank you for sharing your time and expertise.
All the best,
Spiro K.
The problem is that you are using the background attribute. Never use that again, and stop using style attributes. Put all your presentation into an external stylesheet and link to it using a link tag. Doing this will solve your problem as the CSS renders progressively with the DOM.