My buddy Skhilled invited me back over here, and I need some guidance. I ahve been away from SMF for 2 years due to eyesight. I am helping to build a forum and I don't know the newer CSS3 edits.
So I am building a site for a customer, and need to replace the stock logo with the company logo.
SMF 2.0.6
TP1.0
giggle theme by iDesign360
http://carolinahydro.com/ILGM_testsite/index.php (http://carolinahydro.com/ILGM_testsite/index.php)
I would also like to change the blue category links to red, and the green text to (undecided) color. Basically; They want simple white, with red links, and black. As far as I can tel. Matches their blog.
Appreciate the help. H
Welcome back, bro. :)
You should be able to replace the logo in the theme settings. If not, that particular logo is in /images/custom/logo.png. To find out what is where on a webpage or theme I suggest you download Web Developer addon for Firefox or Chrome. Press F12 and you'll be able to find out what is where and how to change colors, etc.
The blue category links are in index.css line 1394: color: #4D90FE; Just change that to whatever shade of red you want.
For the green links: index.css line 5: color: #039;
As always, make backups of the files you wish to edit first! ;)
EDIT: and you might want to update the SMF to 2.0.7...
Hey Doc,
I d'loaded Website developer, but I could not figure out how to find line 1394. Or; Even line 5. :blush: :blush: I did "click" the CSS button and look through quite few lines. What am I missing?
Perhaps I need a deeper layer of guidance... :pizza:
Ok, go to Web Developer -> Inspector. whe nit comes up click the "Inspector" tab then hover any part of your webpage and you will see things change at te bottom of the screen telling you what it is on the left and the css codes along with the file and line number on the right.
The best thing is that you can change the code on the right side of the screen and see it happen live...right on the screen! It will not stay that way but will give you an idea of what you want to change and how you want to change it.
Can't find "Inspector" anywhere. Went through all the tabs on my Web Developer toolbar on Mozilla
So; I don't know what you mean. It seems simple, ,but I don't see it. :(
Was hoping I could do these edits before the boss gets back in town. thanks
On another note. I remember when you could change the banner in the Admin, but I saw nowhere to disable or replace the logo.png
I did try manually last week, by overwriting the logo.png with my image. Do I need to do anything to image other than rename it?
Got the logo done. thanks. Why is there a logo.png images, and another one in images/custom? FFRe:
Still trying to figure out this Web Developer MOd. Cannot find anything named "Inspector" Peace,H
Quote from: hygron on May 08, 2014, 07:29:31 PM
Got the logo done. thanks. Why is there a logo.png images, and another one in images/custom? FFRe:
I have no idea why they did that. I have never used that theme before.
Quote from: hygron on May 08, 2014, 07:29:31 PM
Still trying to figure out this Web Developer MOd. Cannot find anything named "Inspector" Peace,H
Do you see this:
(http://imagizer.imageshack.us/v2/xq90/836/82r7.png) (https://imageshack.com/i/n882r7p)
If so, after you click it you should see this:
(http://imagizer.imageshack.us/v2/xq90/834/1hx4.png) (https://imageshack.com/i/n61hx4p)
See "Inspector" in blue?
Well I found it. Problem was; When I downloaded web Developer for Mozilla; I did not realize it was in, and that you meant In, tools. Thanks,
Looks like it might work well for a blind MOFO like me. I will let you know. Never had problems finding the code before I went blind. Now; It can be really tedious.
Quote from: hygron on May 09, 2014, 05:14:55 PM
Well I found it. Problem was; When I downloaded web Developer for Mozilla; I did not realize it was in, and that you meant In, tools. Thanks,
Looks like it might work well for a blind MOFO like me. I will let you know. Never had problems finding the code before I went blind. Now; It can be really tedious.
Cool! You can also use Notepad++ to search for code in a file or in folders on your hard drive. Let's say you have SMF 2.0.7 extracted on your hard drive and need to find some code. You can do it using that.
Quote from: hygron on May 09, 2014, 05:14:55 PM
Well I found it. Problem was; When I downloaded web Developer for Mozilla; I did not realize it was in, and that you meant In, tools. Thanks,
Looks like it might work well for a blind MOFO like me. I will let you know. Never had problems finding the code before I went blind. Now; It can be really tedious.
No problem. If you need more help let me know.
BTW, can you see the images I posted? If not, I need to find a new way to show you how to do things.
Of you are talking about, what I would call screenshots; Yes; 2 of them. In fact; that is how I figured it out. I saw "tools" above the window.
This is awesome; You mentor php; like I mentor growing... You give a man a fish...Or; You teach...
Thanks. I feel like I am going to master a few things that have bugged me for a while.
I know you have vision problems but was not sure if you could see the screenies or not. I prefer to use them cause even for people who do not speak English they can easily understand what I trying to show them. ;) I'm no expert but many people have been willing to go out of their way to help me, so I do the same for others.
I also prefer to teach someone how to do something rather than do it for them. If you're gonig to have a website then there are a lot of things you must learn or get someone else to do it for you. But then you are at their mercy if you get them to do it.
I noticed in Web Developer; There is an editCSS file. I used this and saw the instant style changes on the page. Will the edit remain if I don't change it back? Again; When using the WEB develpor.
Actually, it depends if you use Live Edit or not. If you do not use Live Edit any changes you make will NOT be saved. This gives you a lot of chances to make adjusts to see what you'd like.
Quote from: Skhilled on May 07, 2014, 08:09:10 AM
Welcome back, bro. :)
You should be able to replace the logo in the theme settings. If not, that particular logo is in /images/custom/logo.png. To find out what is where on a webpage or theme I suggest you download Web Developer addon for Firefox or Chrome. Press F12 and you'll be able to find out what is where and how to change colors, etc. I was bale to change banner
The blue category links are in index.css line 1394: color: #4D90FE; Just change that to whatever shade of red you want. I cannot find this color code at all. How about a "find this" and replace with "this"...Please
For the green links: index.css line 5: color: #039; I fouund this around line 5, but it is #009933, So I am not sure if that is all of it, yet
As always, make backups of the files you wish to edit first! ;)
EDIT: and you might want to update the SMF to 2.0.7...
One thing that really is confusing. For instance; You say this is on line 1394. How am I to identify line 1394? I have spent a lot of time going over and over the CSS file and can find no "line" markers. Thanks for the help.
QuoteOne thing that really is confusing. For instance; You say this is on line 1394. How am I to identify line 1394? I have spent a lot of time going over and over the CSS file and can find no "line" markers. Thanks for the help.
What are you using to edit your files? You cannot use Windows Notepad or MS Word. Notepad is just for jotting notes mostly and MS word is for word processing not for displaying or editing any kind of code. In fact, they can even mess up your files. You need a code editor like Notepad++ (http://notepad-plus-plus.org/), conTEXT (http://www.docskillz.com/docs/www.contexteditor.org/), phpDesigner (http://www.docskillz.com/docs/www.mpsoftware.dk/phpdesigner.php), etc. They will have line numbers and a lot more!
QuoteFor the green links: index.css line 5: Code: color: #039; I fouund this around line 5, but it is #009933, So I am not sure if that is all of it, yet
And you are correct...the color is #009933 in Line 5.
Basically you would Find:
color: #009933And replace it with the color of your choice. If you are not sure what color or shade of a color you want I suggest you try this:
http://www.colorzilla.com/firefox/ (http://www.colorzilla.com/firefox/)
It is a Firefox and Chrome addon that wil lhelp you to pick colors and will give you the color code as well. You can then copy and paste the code into your css file.
Back to the grind. Skh...I generally use textpad, but I will try context
I am installing the clolzilla. Thanks. I have a few color code wheels, but always want to try something newer and more efficient. Thanks
Let you know how it goes!
You can also use this to get good color schemes that work well together.
http://colorschemedesigner.com/ (http://colorschemedesigner.com/)
I chnaged this color 009933 to a RED. EEEEE I think. When I refreshed the page the Blue text went to light gray, and barely visible. Any thoughts?
I'm thinking you changed it to light gray. LOL
EEEEE is a cyan color...very light blue. EEEEEE is a very light gray, almost white which is what I assume you set it to...
OK. I clicked on the red for a code and it gave me that. Thanks for clarifying. at least I know when I get a real RED code. It will be RED. later Forum on hold. Owners too busy with business to communicate with me. I am still going to play with this as test site for all my new ideas, and mods.