I've got a simple basic .html document that I'm using for a "My Links.html" local, offline page to use as a way to store hyperlinks to other websites I find interesting. It's kind of like a portable "bookmark" page on the go. Here's some sample code that I've created already:
<b><h3>Web Design Resources</h3></b>
<hr />
<br />
<b><h4><u>CSS Tutorials</u></h4></b>
Line25.com
<ul>
Tutorials
- main tutorials page<br />
Pure CSS Dropdown
- Creating a dropdown menu solely out of css, nothing else (includes sub menus that slide out to the right) <br />
Trendy flat-style-css-menu
- how to create a trendy flat style css menu (hover over "menu image" puts menu title to the right of the images)<br />
Slick Features Comparison Table
- a ghosted (semi transparent) table that vertically compares three items with the categories on the left, box highlight on category font when hovering over any of the text in that row<br />
Simple Collapsing Header Effect
- fixed horizontal menu on top with header text/image that is hidden when scrolling down the page, replaced with the content
Currently I'm manually opening the html document and editing it to add each new link, description and categories (as they come up).
What I'm looking to do is add some simple forms and a submit button to update this offline .html document. I'd like to keep everything contained in the one single document for ease of moving around.
Ideally it'd add text using this format: "hyperlink - description"
With a dropdown of existing categories so that it adds to the correct section. Just a couple text boxes, a dropdown box, and a submit link or button. Nothing fancy, just the bare bones to "get the job done".
Thanks everyone, even if ya can just point me in the right direction or let me know the element names so I can more effectively research what I'm looking to do.
I don't think this will be possible with pure HTML.
You can alter the HTML with Javascript (jQuery) on the client side, but you won't be able to save the changes to your local file system trough Javascript. You can always save the altered document manually if that is an option, but it doesn't seem ideal to me.
For a more solid solution you would need some server side scripting like PHP, and a webserver like Apache running on your local machine (like XAMP or MAMP). And ideally you would need to work with some sort of database or XML file to store the data. Technically it is possible to just alter the HTML but it would be strange and highly uncommon. The XML file will be the easiest for portability, the database will be better for performance (and probably a more useful exercise).
Not sure if this is the best way to handle you 'problem' though. Why not just work with an existing service like Xmarks. You will have access to your bookmarks directly from your browser, can sync them between various machines / browsers, or can access them through their website.
If you are just trying to learn something new however, I encourage the effort. Feel free to ask for any more specific pointers once you decided which route you want to take...
Related
As a favor for a friend, I'm trying to add a quick Valentine's Ad for an article that is supposed to be appended to the top of their existing site starting... tomorrow. They have an existing site made by somebody they are no longer in contact with back in 2010 built with Drupal.
I don't know Drupal. The only information I have is a HostGator login that I'm currently using to send a backup zip to my email.
HostGator's File menu doesn't even show search results for the text I'm searching for on the main page where I'd put this.
I have no idea what I'm doing, basically. I'm comfortable as a web developer in general and figured "yeah I can add a thing to the top of your pages, sure." I can write that HTML quickly, but everything else... do I need Drupal installed, etc, and will that run with the backup that HostGator is gonna send me?
Any advice? I realize I'm an idiot for signing up for a favor like this last minute.
Ultimately I just need to add some pictures and some text.
Easiest way to achieve this would be creating custom block. Not sure what version of Drupal you use, but let's assume it's D7 (similar for other versions):
Go to Structure -> Blocks -> Add block
Enter your static content into "Block body" field. Change that field format to "full html" so drupal won't filter out some of your tags.
If you don't want Drupal's block title to appear in Block title field enter < none > (without space signs in between! - SO can't show it without spaces).
Save your block
Now go to Structure -> Blocks...your block should be visible in block list. You can find and edit it from there.
Theme site uses has "Regions" (something like sidebars). If want your block to appear with main content find your block and select "Content" region. Or any other you want.
At top of that page should be a link "Demonstrate block regions" - click it to see which region is where..
After selecting region you can click "configure" link for your block to precise in what conditions block should appear on page. Click it.
Scroll down and in right sidebar at bottom of configure page you'll see "Pages", "Content types"... it for selecting on what pages, on what content types...your block should be visible. Default is everywhere, so if you need this - use it.
Save block. If you didn't save on Structure -> Block after selecting region select region again and Save.
You can embed your CSS there, but you can also go to (usually): /sites/all/themes/your_theme/styles/style.css or something like that.
If you can't find CSS turn the caching off for a moment: Configuration -> Development -> Performance and inspect location of loaded CSS file(s) (use browser inspection tool).
Good luck!
So I have a custom css drop down menu and it works fine except I realized that writing this menu out across all the html pages on this website will become tedious if I should update with a new section to the website and need to add on a new tier to the menu, I would end up with a billion htmls to update one simple line of code.
I was wondering, is there a way to write this menu once (on the main page) and call on it on all my other htmls?
I experimented a bit with Objects, Iframe, to call on the dropdown menu written on a separate html file and such but when the menu expands you get scroll bars and both methods seem to embed into the page. I want the contents of the page to be behind the drop down menu just as it standardly looks right now.
The following is my unedited page:
http://www.blue-cicada.net/trivial/index.html
And this is my test:
http://www.blue-cicada.net/trivial/test/
Not looking so good there, my top image is obscured, the submenus wont fly out completely etc, how to fix?
Im really new to this stuff so any help is appreciated.
You want to do something server side really, back in the day this would have been http://en.wikipedia.org/wiki/Server_Side_Includes, depending on who is hosting your site it may even still be, though that's fairly unlikely. Chances are you have some provision from your webhost to do something server side, ie PHP Includes say.
If not you could look at doing JavaScript client side includes but its crufty,
If you're really just hand editing you html files and have no access to any server side technologies well, you can always just have a text editor that can search and replace across multiple files
UPDATE
Given your comments I would just download something like Notepad++ and read the Bulk Find and Replace here 'http://www.dedoimedo.com/computers/notepadpp-tricks.html'. Basically you can have a test page you use for figuring out 'what you want to do' and then use the global find and replace to update all of the 'current' versions of the header/menu/whatever to you new version.
Backup all you files first!
Write it in a page called A.html.
On every page where you want to put it, use an <iframe src="A.html">
Make sure you remove the borders of the <iframe>, and also the scrollbars and make it look natural
I have to create Joomla website. I am PHP programmer, but new to Joomla.
I have spent a lot, reading tutorials and other staff.
The website is very simple, it is visit card for restaurant.
I have installed Joomla 2.5. Spending two days I have managed to do the following:
- create menu
- create multi language site (2 languages) with language swicher
- create simple static pages (articles)
- create one page as contact
- create simple template just for my website
However, I cannot do some things and I have not found any answers in tutorials or google.
If you open this file http://img1.uploadscreenshot.com/images/orig/1/2621034793-orig.jpg you can see images with three different pages on the site:
1) Article with three images on the right.
Basically, I do not know what is the best practice to create article with some custom HTML in it (in this case these are images). For example, i can create table with two columns - one for text, another for images. Without Joomla I would create two divs, but how this can be done here??? Also with custom html I need to do the same for each language - I need to add images for each language, I do not like this. I really have not found any solutions for this. Do you have some suggestions?
2) Article with three buttons on the right side. This is article on landing page.
This is probably the same question - how to create article with some custom HTML in it (in this case these are three buttons - links to pages inside the website)? Again I can create table with text and buttons, but this should be done for each language. Is it a good practice? Do you have some other suggestions to create article with three buttons on the right side? Maybe I can create some custom module, but this sounds strange.
3) Contact page with google map.
I have create contact page with contact details. This is another question, I would ask other time.
Hello Renathy and welcome to Joomla!
1) You can of course insert divs in the editor and style them with floats; but as you mention this is pretty bad for translation, and allows the user to easily break the layout.
You have the following options:
1.a)
Joomla 2.5+ supports an article image and thumbnail that you can specify in the Images and Links group for each article. Quite some work to extend to 3 images, you would need to write a plugin (or do a nasty core hack) and override the view; also it's not well documented. There is a discussion here about it: Add additional images to articles in Joomla 2.5
1.b)
Add the extra images as above with the plugin. Then use a module for displaying the images instead of the view override.
1.c)
Use a custom image management solution to link images to an article, then a plugin to display them. Easier, but still a lot of work. I have done this on one site and worked fine, although I would change a lot of code now. As far as I know there are no extensions available that will do this.
All three solutions allow you to use proper floating of the contents using divs floats responsive as appropriate, and will isolate the layout of the content from the images, thus obtaining a solid environment for the content editors, and easy translation (although, if you go with 1.a) or 1.b), I strongly advise you to use a proper translation suite such as Falang or JoomFish (Falang is a different port of Joomfish from the old 1.5 version)
2)
You will address this as above, with a module.
Create in your template a main
<div class="content-box">
<div class="content-main"> here you will place your component's output.</div>
<div class="content-sidebar"> here you will output a new module position, name it "article-sidebar"</div>
Then style it like this:
div.content-box {
/* here you need a clearfix choose one here: https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/211467#211467 */
}
div.content-box div.content-main {
width:70%;display:inline-block;float:left;
}
div.content-box div.content-sidebar {
width:29.99%;float:right;
}
div.content-wide div.content-sidebar {
display:none;
}
But you may not want this on all pages, then you can deal with it programmatically when generating the template.
The idea is: in your template output, where you are writing
<div class="content-box">
instead add a class conditionally when your article-sidebar contains something:
<div class="content-<?php
if ($this->countModules("article-sidebar")==0)
echo "wide";
else
echo "box";
?>">
This will dinamically change the class of the div, so you only serve 1 css.
At this point, create a module and choose to display it "Only on selected pages" .
3)
When you want to change a view, never change the file in place. Instead copy all the view's php to a folder under your template's folder / html/com_contact/contact. Even if you're changing a different layout, you will still need to copy there the default.php.
Then change it inserting the google maps.
A final consideration. You should refrain from editing core files. Joomla sometimes issues security updates, and applying them will be painful. Good luck with your site.
I have a pptx file, complete with working links which i would now like to convert to html. The idea really is to convert the pptx file into a website.
I am using Power Point 2010. I got some tips on how to do this conversion
# http://support.microsoft.com/kb/980553 and a tool which does exactly the same thing
# http://www.ultrashareware.com/Ultra-PPT-To-HTML-Converter.htm
I am able to get an html version,but the links do not work. Navigation is only possible by clicking the slide number created on the left pane of the created html frame.
My questions
1. How do i get the links on the html page to work as they did in the pptx
2. The main page is divided into 2 frames, the left showing the slide numbers. How do i get rid of the left frame entirely?
Thank you
Sameer
If you're interested in writing it yourself, it's a fairly substantial undertaking. The most direct method is to export an image of each slide and put that into the resulting HTML with an IMG tag. You'd also need to construct an image map and include in it each of the hyperlink URLs from the slide, along with coordinates normalized from PPT's slide size to the size of the image you're adding to the HTML. Or work out how to put links in DIVs atop the image.
If you're looking for an immediately available commercial add-in that gives you more control over the appearance of the HTML, I've written one. There's more info and a free demo at http://www.pptools.com/ppt2html/
I'd be happy to answer any questions you have about it, but it might be best not to clutter SO with support chat. There's a Contact link on each page of the pptools site; best to use that to get in touch, if you wish.
Im using wordpress.com to host my blog. When you click on the site image, it takes you back to the blog home page and not the homepage the belongs to my site.
I know how to change this with an installed wordpress through the editor menu.
However, I dont have any of these option on wordpress.com, however, I have full access to mutate stuff through css.
Is there a way to force CSS to make the changes for me.
Site
However, I want it to read
Site
Just to recap, I dont have an option to change this through the editor. My only option of changing this is through CSS.
I was thinking to use something like this to replace the text inside the herf. But I cant even get it to work with the example text.
Thanks a million.
No - CSS is a read-only way to style page content, not change the content itself (which that tag is a part of).