http://www.kriesi.at/support/tags/larger Support Forum - Tag: larger - Recent Posts en-US Wed, 19 Jun 2013 01:10:01 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/colour-font-size-changes#post-110310 Fri, 10 May 2013 10:34:18 +0000 Nick 110310@http://www.kriesi.at/support/ <p>Hi,</p> <p>Use either clipular.com to send screenshots that you don't need to alter. If you need to add something to screenshot, use <a href="https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce" rel="nofollow">https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce</a> for chrome. You can always add images and get a link on imgur.com</p> <p>In the video when I always paste the css in Dev Tools at the end of existing css, all under the 'Sources'' tab, what I am doing is making sure that the css actually works since by pasting there, I am adding my changed css at the end of the cascade. When you change things under the ""Elements"" tab, you are virtually changing the css but in the position it is normally located in the cascade. </p> <p>And no matter how well the Dev Tools have been written, there are situations where bad css and whatnot change things later in the cascade. Thus I don't rely on my original changes in the 'Elements"" tab and like to double check them before I paste and save the block of css into my site (or paste it here as an answer to a support request). Its a process of sculpting and tweaking the css to force it to obey.</p> <p>*Ok lets end this support request since I think with the video and code, this train of thought is complete and will perhaps help others. That other thing you ask about, please open a new ticket since that should have its own discussion, you can add ''nick'' as a tag.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-110151 Thu, 09 May 2013 21:13:37 +0000 andypeck 110151@http://www.kriesi.at/support/ <p>Great video Nick although you had me a bit lost in the middle but im deffo learning from you so thx. </p> <p>So tell me... how can I send you an image to explain this 'feint line thing'? </p> <p>Cheers<br /> Andy </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-110104 Thu, 09 May 2013 16:22:44 +0000 andypeck 110104@http://www.kriesi.at/support/ <p>Done it! its getting easier. </p> <p>Thanks for the video too....</p> <p>Now all I need to do is explain how to actually create this 1px grey solid line that spans the entire menu (Home, Portfolio, Blog, Contact, About Me) and sits behind/at the top of the highlight line we've just moved up. I worked out how to make the highlight line 3px deep and adjusted its position</p> <p>Ill set up a dropdown menu and check that it all still works. I forgot to mention that my aim is to change the dropdown menu background colors and not change the text. Hence... ROLLDOWN - Background is black, ROLLOVER - Highlight background changes to a deep orange and theres a subtle text colour change too. Ill play around myself and see how I get on</p> <p>Is there a way for me to send you an image?</p> <p>Once ive done the menu ive pretty much got everything else within the theme as normal. I might want to create a giant slabtext on my home page only but thats it. Just so you know that I wont be sitting on your coat tails for the entire site!!!!!!</p> <p>Cheers<br /> as always </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-110096 Thu, 09 May 2013 15:38:02 +0000 Nick 110096@http://www.kriesi.at/support/ <p>Hey,</p> <p>Here is dat video link (in Brooklyn accent) <a href="https://docs.google.com/file/d/0B8hqGBMSfHtKa1VmZVRPVU5ZS2s/edit?usp=sharing" rel="nofollow">https://docs.google.com/file/d/0B8hqGBMSfHtKa1VmZVRPVU5ZS2s/edit?usp=sharing</a> </p> <p>Video for Vimeo.. once I trim 8 minutes off it.</p> <p>Nick </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-110094 Thu, 09 May 2013 15:23:54 +0000 andypeck 110094@http://www.kriesi.at/support/ <p>Blimey Nick (said in a respectful posh London accent) Im so bloody impressed. Im gonna be sat on a train going home from a client visit in an hour or two and ill give it a try... A video too. Being spoilt but I am very grateful and I mean that</p> <p>By the way, as im working locally how can I get you examples of my ideas. theres no attach button on here so I dont know how to share my ideas or do we just have t wait till I go live and then tell you the URL?</p> <p>As always, you are brilliant<br /> Thx<br /> Andy </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-110091 Thu, 09 May 2013 15:06:26 +0000 Nick 110091@http://www.kriesi.at/support/ <p>Hi,</p> <p>Put up a menu on your website. Please don't talk in abstractions and generalities or i will make up my own colors, sizes, etc. I get a vague notion of #6. The rest I think I get. I made video of me doing it. Good stuff for youttube.. Website crashed in middle of video though. I didn't do responsive since i dont think it will make any difference regarding colors, that flying underscore though probably needs 1 media query.<br /> <pre><code>/*triangle killer*/ #top .current-menu-item&gt;a&gt;.avia-menu-fx&gt;.avia-arrow-wrap,#top .current_page_item&gt;a&gt;.avia-menu-fx&gt;.avia-arrow-wrap { display: none; } /*menu top font color off*/ #top .header_color .main_menu ul:first-child&gt;li&gt;a { color:rgb(255,8,8); font-size: 1.1em; } /*menu top font color hover*/ #top .header_color .main_menu ul:first-child&gt;li&gt;a:hover { color:rgb(8,255,255); font-size: 1.1em; } /*sub menu font color */ #top .main_menu .menu ul li&gt;a { color:green; word-spacing:1.2em; font-size: 1.1em; } /*sub menu font color hover*/ #top .main_menu .menu ul li&gt;a:hover { color: blue !important; } /*sub menu background off*/ #top .header_color .main_menu .menu ul li a:hover { background-color: rgb(12,9,122); } /*sub menu background hover*/ #top .header_color .main_menu .menu ul li a:hover { background-color: rgb(68,9,9); } /*underlines now float above menu*/ #top .avia-menu-fx { display:block; position:absolute; top: 25px; }</code></pre> <p>Video is uploading, gonna be here in 5 mins.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-110080 Thu, 09 May 2013 13:55:30 +0000 andypeck 110080@http://www.kriesi.at/support/ <p>Hi there,</p> <p>Well, im having fun trying things out but the menu/navigation is a tricky beast. Ive been trying all sorts of things but nothing seems to work even following other peoples examples and following your process still leaves me stumped... here's what Id love to do</p> <p>1) Increase the font size but make it responsive in the right way<br /> 2) Change the word spacing<br /> 3) Remove the triangle tick over the line and thicken the line<br /> 4) Change the colours of the OFF/ROLLOVER &amp; ON states of any dropdown</p> <p>nice to haves</p> <p>5) Move the Menu (highlight line) above the text<br /> 6) Add a feint line attached to this that spans the entire menu set</p> <p>Is this all BIG LEAGUE stuff or can I do any of this relatively easily?</p> <p>Cheers again for all your support<br /> Andy</p> <p>p.s if theres a way to send me an image of what im trying to do then please let me know and ill send a jpg </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-110011 Thu, 09 May 2013 08:28:32 +0000 Nick 110011@http://www.kriesi.at/support/ <p>Andy,</p> <p>You are the first person to ever ask me that question (whether to start a new thread), most just ask 3 pages of unrelated questions over 5 months. Thanks for asking! Nah you can continue here since its relevant to the overall theme of our exchange.</p> <p>I felt that in your case best thing to do was to get you hooked on the google tool since then you can customize your own look. read somewhere carefully about position:absolute and position:relative and how they relate to each other when one div is relative inside an absolute div and vice versa and how that affects margin and padding. Also try to move your logo for example to the bottom right corner of screen without messing anything else up using right:20px .left, down, top, and the position: tag... Goodstuff.</p> <p>It's not difficult to edit it. Now sitting down in front of an empty screen and writing it from nothing is difficult.</p> <p>So ask away.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109978 Thu, 09 May 2013 05:41:20 +0000 andypeck 109978@http://www.kriesi.at/support/ <p>Hey Nick,</p> <p>Ive taken my personal portfolio offline while I rebuilt it. The basic Enfold installation is there and thats due to be replaced with a countdown. Not sure how I show you something local other than to give you a screen shot.</p> <p>Good news though in that I sorted the colouring out using your method so thank you. Basically I should have been using 'icon box' and not 'Icon list' and then it was a case of trial and error.</p> <p>I think for the most part I can get on now but as im creating a dark (chocolate) background based look and feel I have two other questions which relate to the main menu. should I start a new thread or continue talking to you here?</p> <p>Cheers again and thanks for all your help. You are the first person who has tried to help me understand it properly and not just assumed im casting a spell in some mystical dark arts... although it does still feel a bit like that.</p> <p>all the best<br /> Andy </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109750 Wed, 08 May 2013 13:06:44 +0000 Nick 109750@http://www.kriesi.at/support/ <p>Hi,</p> <p>Ok thats good, however that won't always work. You need to add #top before everything (which is from the body tag) , this way you will get more specificity and override the original code. Sometimes for some real hard cases, you need to add !important; to the end of the statement -- color: red !important;</p> <p>if your code ignored, do this. Open up chrome developer tools like this ( <a href="http://i.imgur.com/RfNyIBs.png" rel="nofollow">http://i.imgur.com/RfNyIBs.png</a> ) find custom.css file in there step 2, then you add your changed code into the screen in middle, just don't forget to copy it if you need to refresh ) and enter the css directly, if nothing changes, add #top, take something off, and you will see results live, so this way you don't have to copy and paste and save every time to see whats working and what isnt. also you can edit the html live too and any of the files, but as soon as you refresh, its all gone. </p> <p>also don't use media="screen" unless you see something like @media only screen and (max-width:767px) { .. if you see that, you need to grab that since that's a media query (which is css that works on a specific screen size for mobile/tablets).</p> <p>so first try (your code with #top directive) </p> <pre><code>#top .avia-icon-list .iconlist_icon { height:64px; width:64px; line-height:60px; font-size:30px; text-align:center; border-radius:500px; position:relative; float:left; margin-right:30px; margin-left:2px; z-index:5; border-style:solid; border-width:2px; color: #fff; }</code></pre> <p>Then as you get comfortable you will see that css is like a postal address country, state, city, street, house.. further you go in the more specific it becomes. So you can take the less specific stuff off sometimes.<br /> <pre><code>#top .avia-icon-list .iconlist_icon { background-color: #d73119; }</code></pre> <p>----------------<br /> I wish you had a url, where I can look at these disks. when i click url from your name , a website loads, but nothing there.</p> <p>Don't give up on this tool, watch a youtube tutorial for it because its as easy or complex as you want it to be. Its the only one I use and only one many (if not all) use to debug or modify any website.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109679 Wed, 08 May 2013 09:02:25 +0000 andypeck 109679@http://www.kriesi.at/support/ <p>Hey Nick,</p> <p>I think ive fathomed how to change the color although I seem to wrestle with internal CSS components which seems to mean my code is ignored half the time. Theres clearly a process I need to go through but its a bit hit and miss. </p> <p>**/SEE BELOW/**<br /> <pre><code>.avia-icon-list .iconlist_icon{height:64px; width:64px; line-height: 60px; font-size: 30px; text-align: center; border-radius: 500px; position: relative; float:left; margin-right:30px; margin-left:2px; z-index: 5; border-style:solid; border-width:2px; color:#fff; } .main_color .avia-icon-list .iconlist_icon { background-color: #d73119; }</code></pre> <p>----------------------------------------------------------</p> <p>it seems that I can do it providing I have both parts but im not sure why. I got the first part from another post.</p> <p>Anyway, my last question on this is how do I create this same entypo disc without the the list content to the right. This is mainly because I want to create individual entypo discs with my own descriptive text either above or below it (centred or left justified). Im kicking myself for not just asking that question at the start</p> <p>Cheers<br /> Andy </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109561 Tue, 07 May 2013 22:09:11 +0000 andypeck 109561@http://www.kriesi.at/support/ <p>hi again...</p> <p>and to add to this. what if all I want to do is use the entypo font pictogram inside a single disc/circle? exactly the same as the Icon list but without the text or dotted lines. I cant find anything to help me at all</p> <p>Cheers<br /> Andrew </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109560 Tue, 07 May 2013 21:55:23 +0000 andypeck 109560@http://www.kriesi.at/support/ <p>Hi there, </p> <p>I think we got our wires crossed as the section I was referring to is the 'Avia icon_list' the discs which contain the entypo glyphs. I wanted to change the disc and the outline and leave the entypo glyphs white. I also want to resize them too </p> <p>When I use the inspector I come across the following...<br /> <pre><code>media=&quot;screen&quot; .main_color .avia-icon-list .iconlist_icon { background-color: #d73119 !important; }</code></pre> <p>and whilst changing the color works in the inspector as soon as I drop it into the CSS of my child theme nothing changes. I thought adding !important might help (assuming I understood its importance which I guess now I dont!!) but it did nothing. </p> <p>Thing is, this is where I usually come stuck as ive followed your instructions but things like this wont change. Im clearly not doing something but what is it that im doing wrong? Can you help me understand as my next thing is changing the dropdown background on the top nav and I know that will be the same issue. </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109502 Tue, 07 May 2013 14:39:39 +0000 Nick 109502@http://www.kriesi.at/support/ <p>Hi,</p> <p>This is the url of the About Us section of the demo <a href="http://www.kriesi.at/themes/enfold/pages/about-us/" rel="nofollow">http://www.kriesi.at/themes/enfold/pages/about-us/</a> ... There are no icons here , but I am guessing thumbnail photos - like when you run the mouse over harrold houdini's photo?</p> <p>I got this css exactly the same way as shown on the above video using chrome developer tools</p> <pre><code>/*---these are the colors when mouse hovers--*/ #top .avia-team-member .twitter:hover { color: rgb(70, 212, 254); } #top .avia-team-member .dribbble:hover { color: rgb(228, 72, 133); } /*---this is the regular color of the icon inside circle--*/ #top .main_color .team-social a color: grey; } /*---this is complete settings controlling size, shape, background color, position of the circle itself--*/ #top .team-social a { text-decoration: none; position: relative; border-radius: 30px; padding: 0 16px; background: rgb(224, 17, 17); margin: 3px; display: inline-block; height: 53px; line-height: 54px; width: 53px; }</code></pre> <p>Keep playing with developer tools, i know at first it seems oppressive, but there is nothing better than this to use to quickly be able to edit css of any site.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109339 Mon, 06 May 2013 20:08:22 +0000 andypeck 109339@http://www.kriesi.at/support/ <p>Hi Nick,</p> <p>thats great and I think when we talk basic changes like H1 text, logo heights etc... the way you mention seems relatively straight forward for a novice. Where Ive become continuously unstuck are things like the discs (behind the icons) if I want them a different colour or size, or to change things that have (what i call) nested button states - the drop down menu for instance as I want to change the colours of the 'drop down' background but because there are several states (off, rollover and sometime on) I cant quite find the right piece of code using the method you mention. I also want to alter the (moving) thin underline when you rollover the top nav so that I remove the middle 'tick' mark and increase the thickness slightly but again I can't see where the correct code is amid a sea of other comments. This im sure is my inexperience but any clue as to how to deal with such things would be warmly received</p> <p>Cheers<br /> all the best<br /> Andy </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109331 Mon, 06 May 2013 19:54:21 +0000 Nick 109331@http://www.kriesi.at/support/ <p>Hi,</p> <p>Your best bet is to instal Chrome Developer Tools and without needing to know CSS you can manipulate the elements easily. I just made a video <a href="https://docs.google.com/file/d/0B8hqGBMSfHtKd2l6UkcwUjVBVWM/edit?usp=sharing" rel="nofollow">https://docs.google.com/file/d/0B8hqGBMSfHtKd2l6UkcwUjVBVWM/edit?usp=sharing</a> showing how easy it is to change the menu any way you want , copy and paste to quick css in the theme backend. This is the best tool for editing without the learning curve.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/colour-font-size-changes#post-109047 Sun, 05 May 2013 14:21:18 +0000 andypeck 109047@http://www.kriesi.at/support/ <p>Hi there,</p> <p>Trying to change a few things as im creating a dark theme with a chocolate background with dark red buttons, labels &amp; icons. Ive looked through the layout CSS file and cant seem to change/find what I need</p> <p>1) The font sizes throughout - in particular the H1 tags and the main menu fonts. I want to use much bigger font sizes. When I try to change the menu in the layout CSS file nothing happens which I presume is because of responsive control settings<br /> 2) Changing the drop down nav background to red with black/white text and also a lighter rollover background version<br /> 3) The circular disc backgrounds (as used in the demo 'About Us' section) id like to change the disc background to the mentioned red colour</p> <p>Cheers </p> http://www.kriesi.at/support/topic/need-logo-to-be-larger#post-82081 Sat, 03 Nov 2012 10:56:23 +0000 Nick 82081@http://www.kriesi.at/support/ <p>Hi,</p> <p>1) I am not sure I understand the question. If your website is running on Wordpress (a content management system CMS) you can use plugins built for that CMS. However if your website is running on a different CMS such as Joomla for example or Drupal, then you would need to use plugins built for those systems. </p> <p>All websites are created via a process such as this - first laid out in Photoshop/Illustrator/Fireworks then are transferred to html/css. At that point the design is complete and a programmer creates a theme which includes the layout along with the database/interactivity/backend functionality using some programming language, which in the case of Wordpress is PHP and in addition uses syntax specific to Wordpress. A Wordpress theme without Wordpress is like a DVD without a DVD player.</p> <p>I think your confusion can be cleared up by investing 3-4 hours watching basic youtube videos about Wordpress and CSS.</p> <p>I suggest you watch these:<br /> 1) <a href="http://www.youtube.com/watch?v=it8jbSdderk" rel="nofollow">http://www.youtube.com/watch?v=it8jbSdderk</a> (a bit longwinded, but he litterally doesn't leave any point unturned)<br /> 2) <a href="http://www.youtube.com/watch?v=nTkFxkjDvjM" rel="nofollow">http://www.youtube.com/watch?v=nTkFxkjDvjM</a> (can put an insomniac to sleep, but after 10 mins gets better)</p> <p>The second video above, is all about the #1 tool you should get to know and love if you want to change your name from codeless to codechamp - firebug on firefox/or chrome developer tools on chrome. Begin with this 5min video <a href="http://vimeo.com/20917974" rel="nofollow">http://vimeo.com/20917974</a> </p> <p>---------------------</p> <p>Regarding creating image galleries, please add the <a href="http://wordpress.org/extend/plugins/nextgen-gallery/" rel="nofollow">http://wordpress.org/extend/plugins/nextgen-gallery/</a> Nextgen Gallery plugin, which will let you easily create galleries anyway you want.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/need-logo-to-be-larger#post-81800 Thu, 01 Nov 2012 13:26:18 +0000 Codeless 81800@http://www.kriesi.at/support/ <p>Thanks for the reply. I fixed the logo issue. Here's 2 more questions, that I can't figure out.</p> <p>1. As far as the 2nd answer, can I still install a wordpress plugin if i didn't use wordpress to create the site?</p> <p>2. This is regarding prettyphoto, in the "Portfolio" section..When I move the cursor over the picture, the magnifying tool shows. When I click that, a transparent box appears and another larger image appears on the screen. My question is, I want to be able to scroll thru a set of pictures but how do I code that? Is that code built on another page, like a css page or some other page? </p> <p>Thanks again. I should have chose my user name as clueless instead of codeless. ;) </p> http://www.kriesi.at/support/topic/need-logo-to-be-larger#post-81383 Mon, 29 Oct 2012 09:17:22 +0000 Dude 81383@http://www.kriesi.at/support/ <p>1) Yes. The psd files can be found in the themeforest zip archive.Open the zip file and you'll find a folder called "psd". This folder contains several other folders - among them psd, psd2 and psd3. Each of these folders contains a file called "logo.psd". Select the right logo.psd (depends on your skin) and edit it with Photoshop. You can change the logo dimensions in style.css. Open up the file and search for following code:</p> <pre><code>#top .logo, .logo a{ height:90px; width:210px; display:block; position:absolute; left:20px; top:13px; border: none; padding: 0; margin:0; overflow: hidden; }</code></pre> <p>Adjust the width/height value as required.</p> <p>2) You can try plugins like: <a href="http://wordpress.org/extend/plugins/column-shortcodes/" rel="nofollow">http://wordpress.org/extend/plugins/column-shortcodes/</a> </p> http://www.kriesi.at/support/topic/need-logo-to-be-larger#post-81275 Sat, 27 Oct 2012 20:47:57 +0000 Codeless 81275@http://www.kriesi.at/support/ <p>Greetings. I really like your design and template a lot but I need to adjust something's for it to work for my content.</p> <p>1. The log at the top "Display". Is there a psd file for it? I really need to make that logo bigger. Can the photo slider thingie be moved down to accodate the logo being larger? My logo is more vertical than horizontal and I cannot change the design. I need the logo to be at least 190 width by 125 height. If it makes things easier. I removed the those 3 columns under where it says "This is «display», a unique". I hope that helps alleviate some room.</p> <p>2. I have a services tab and I made a list of services. Is there any way to make 2 columns instead of one long listing?</p> <p>PLEASE help me, PLEEEEEASE!<br /> - jd </p> http://www.kriesi.at/support/topic/increase-logo-size-in-flashlight#post-43929 Tue, 28 Feb 2012 21:35:54 +0000 Devin 43929@http://www.kriesi.at/support/ <p>Marking this topic as resolved. Glad Chris was able to get things sorted out for you :) </p> http://www.kriesi.at/support/topic/increase-logo-size-in-flashlight#post-43869 Tue, 28 Feb 2012 16:17:16 +0000 bayavoce 43869@http://www.kriesi.at/support/ <p>Yup! Thanks! </p> http://www.kriesi.at/support/topic/increase-logo-size-in-flashlight#post-43798 Tue, 28 Feb 2012 10:34:32 +0000 Chris Beard 43798@http://www.kriesi.at/support/ <p>Hey! </p> <p> bayavoce, I believe I answered your question in the <a href="http://www.kriesi.at/support/topic/make-logo-image-span-entire-width-of-sidebar">seperate topic</a> you've made.</p> <p> Regards,<br /> Chris </p> http://www.kriesi.at/support/topic/increase-logo-size-in-flashlight#post-43729 Mon, 27 Feb 2012 19:40:08 +0000 bayavoce 43729@http://www.kriesi.at/support/ <p>I did this to increase my logo size and it makes the white part of the sidebar protrude into the content section. Also, the opaque bar below the menu stays the same width and it looks weird. Is there a way to edit this? </p> http://www.kriesi.at/support/topic/increase-logo-size-in-flashlight#post-42680 Tue, 21 Feb 2012 08:09:25 +0000 Dude 42680@http://www.kriesi.at/support/ <p>Hey,<br /> you can increase the sidebar width a bit. Add following code to css/custom.css:<br /> <pre><code>.inner_sidebar { width: 260px; } .sidebar.sidebar_absolute { left: -40px; } #top .logo img { max-width: 220px; }</code></pre> <p>The logo width/height will increase about 40px after this css code change. </p> http://www.kriesi.at/support/topic/increase-logo-size-in-flashlight#post-42632 Tue, 21 Feb 2012 00:49:52 +0000 Promont 42632@http://www.kriesi.at/support/ <p>My website is promontoutdoors.com (FLASHLIGHT THEME) and I am trying to increase the size of my logo. What steps can I take to allow my logo to take up a larger space/appear larger to the viewer?<br /> Thanks </p>