I am relatively new to Web Development, and I am messing with a Joomla template installation.
I managed to get firebug to make changes and Firediff to save them as a new CSS, and replaced the CSS file on the server.
What I would now like to do is edit the template elements, (mostly deleting unused template elements), on screen using firebug, and then save the changes to a new HTML document.
My trouble is that I cannot work out where the correct html is to replace on the server.
Only by using Dreamweaver I can ascertain that the file name is index.html, but there are many files called this on the server.
With the CSS file I was able to identify the server path and filename from the blue text in the right panel of firebug, in order to replace the CSS changes with the output from firediff.
Can I identify the location, (and ideally filename), of hte HTML document in the same sort of way from firebug?
You might want to read the template tutorials before removing anything from the template index.php. In general, you want the template to have provisions for every possibility that you might want. A well designed template will have the ability to display multiple columns in multiple positions as well as other positions to place banners, login boxes, weather widgets, or anything else you can think of. Then you simply code the template so that any position that is not being used does not get added to the final code of the page being displayed.
Official documentation - http://docs.joomla.org/Joomla!_1.5_Template_Tutorial
Once you have a good handle on how the template is supposed to work, the file you will be editing is in JOOMLA/templates/YOUR TEMPLATE/index.php
Be sure you get the whole module positions and collapsible module position thing before stripping anything out. A well thought out template will very rarely need any code editing, virtually everything should be done in the admin and with CSS page class and module class suffixes.
Related
I know this is probably a very basic/obvious thing, but I'm new to Shopify and trying to assist a client while a colleague is on vacation. I know what I need to change and how to change it, but not how to access it. When I go to Online Store and click Edit Code, I see all the Liquid, JSON, and even CSS files, but I can't find the HTML file I need to edit, nor can I find any of the HTML I need to edit within the theme.liquid file. The resources I'm finding are all either outdated (there is no "Edit HTML/CSS" option on the dropdown anymore) or unhelpful (like this). I can see the HTML in the console and upon clicking View Page Source, but I don't know how to get to it through Shopify. I feel like I'm losing my mind because this HAS to be very simple and obvious. If someone could please tell me how to access and edit the HTML file on Shopify I would be VERY grateful!
The html files are the liquid files.
There are no actual HTML files since this is a Shopify theme.
Depending on your theme, your files are located in:
theme.liquid - here are the header and footer
templates/*.liquid - all liquid files here are the main templates for the different pages
sections/*.liquid - the files here are usually used on the homepage and other pages as well
snippets/*.liquid - these are the reusable code snippets
So depending on your changes you will need to go through these files and update them for the specific changes.
Please have in mind that these files may be used on multiply pages and if you change one of them there is a possibility that this will affect other pages as well.
We are customizing a Wirecloud installation to provide our own branding, text and header links. We have created a subtheme to the 'defaulttheme' and are overlaying our own template, images and sccs files to accomplish our customization.
We have managed to change the header image, landing page and a few other bits, but are hampered by the following:
The generated HTML provides no clues as to which template it originated from (we think?)
Documentation here: https://wirecloud.readthedocs.io/en/stable/development/platform/themes/
specifies a number of template files, but not all of the template. For example we cannot find the place where the 'Sign in' button is defined.
The wirecloud javascripts seem to insert random bits of html for what should be boilerplate stuff. For example a 'Powered by wirecloud' icon appears at the bottom of the screen. The 'get more components' button appears out of nowhere and we cannot disable it.
Many of the generated elements do not have an id, so it is difficult to disable or identify them in a sccs file. The 'get more components' button for example is not relevant for us, but we cannot remove it (so far).
Does anyone have a completed custom theme we can look at? Or can someone point out which template files / sccs files are used for branding and overall look-and-feel?
True, currently WireCloud doesn't print any comment not any other clue for detecting from what template the html was generated.
Some parts are not generated using templates, for example, the "Sign in" button. I recommend you to create a ticket in the issue tracker for each thing you want to customise and you don't find how to do it, so we will be able to give you a better answer, and to create a template if needed.
Remember that you have to include a "Powered by WireCloud" to comply with the WireCloud license. In the other hand, the "get more components" button can be removed by editing the wirecloud/workspace/wallet/wallet.html template, by removing the following code:
<s:southcontainer>
<t:addmore/>
</s:southcontainer>
Well, this can also be discussed and documented. We usually don't use ids because those elements are better located using some kind of selector.
Anyway, we are working to improve the documentation about themes ASAP.
If the CSS files for your site are referenced in the parent page, obviously you can use those CSS rules and classes in the sub-page or "included" page (like a jsp include or a php include). That will run as expected in the browser. BUT, if you are using an IDE or smart text editor of some kind (I'm using Netbeans), you will get warnings about the CSS elements in the sub-page (a .jspf for example) unless that file has a redundant reference to the css files. Is there a work-around for this? I don't want to have to reference the CSS files in both my jsp and my jspf (jsp include).
One technique I've used is to abandon jspf files in favour of a templating system where if you want to include something from a template, the template is actually a full page of which part is marked to be included. I actually use a home-grown template system for this, but my understanding is that thymeleaf (http://www.thymeleaf.org/) offers the same feature.
I am trying to add two html templates in one site one is normal and other for mobile devices.
I want that when someone see my site with mobile it show mobile template instead of normal.
Is it possible?
I discuss this other people they says install parallel site eg: m.atecharea.com and use config file for regular site and name the template file as in regular site . With this method everything goes correct except one thing data folder not loaded which is in root/ directory. They also suggest to change data path manually from this:
// Data paths
define('MEDIA_DIR', 'data/media');
to this
// Data paths
define('MEDIA_DIR', 'http://m.atecharea.com/data/media');
its not work, it shows data folder link like this
http://atecharea.com/http://m.site.com/data/media
its not work
Other person suggest to load wap template instead of default when view through mobile url.
Code is this:
if ($HTTP_SERVER_VARS['HTTP_HOST'] == 'm.atecharea.com') {
$config['template_dir'] = $config['template_dir'] . 'default_wap';
}
it didn't work either.
Please if some one guide to get data folder or second template folder anyone solution from these two will solve my problem
The question is not very specific so a suitable answer would be "Yes". You can try to detect the browser using the user-agent and then send the desired HTML back to the client based on that.
Also there are two widely used alternatives to that:
use an adaptive/responsive layout, meaning one layout that is built in such
a way that it adapts itself any screen
use a standalone domain for the mobile pages
I'm fairly new to Dreamweaver, I've been working on a website that contains a bunch of pages that need to be edited. Mainly, the menu/drop down menu tabs need to be updated with new links and or names/etc. Is there a way to link the menu bar with the rest of the pages so I don't have to manually edit each and every piece of code on every other page?
There are a couple of Dreamweaver specific ways (Templates and Library items), and a better way (server include).
Dreamweaver Templates:
This requires that you have all of your pages based on Dreamweaver templates and you have you menu in a non-editable region. Once you edit the menu in the template and save your template, Dreamweaver will ask if you want to update all the pages in the site. If you do so, then Dreamweaver will go through your site and update all pages based on the template and update the menu code in those pages. This method will require that you upload all of the changed files in order to see the new menu on all of your pages. For more on templates:
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7acda.html
Dreamweaver Library Items:
Library items are similar to templates in that there is a code block that you can update and when saved the update gets cascaded into every instance in the site. Library items are unique in that they are focused on smaller blocks of code that get added to your page. Again, as with Dreamweaver templates, if you make a change, you'll have to upload all of the changed files in order to see the changes on your site. For more on Dreamweaver library items:
http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7e49a.html
Server Include:
This option is "better" in that if you make a change to the include file, once you upload only that file, then all pages that reference the include file will automatically display the updated menu. How to implement this option will depend on the specific server language(s) you have available on your remote site. For example, PHP has at least 4 ways to include an external file (such as your menu): include, include_once, require and require_once.
If you search google or the search engine of your choice for the language name you have available plus include, you'll get a number of results of how to implement an include for your page.
With this option, you'll need to update all pages that have the menu to reference the include file and upload the changed files, but going forward, changes to the menu will only require uploading the include file in order to update your site.
One word of caution with includes is that you need to be careful with the paths in your include files, specifically if you have pages with the menu on it that are in multiple folders throughout your site. Search for relative and absolute paths for more info.